Today, the product put forward an optimization requirement, that is, the picture display we did before is an IMG label. Since we are engaged in overseas background management system, the files uploaded by the people there are in PDF format, which is not supported by VUE, so WE searched on Google. Found iframe, Embed, VueshowPDF (tested not good), PDF, etc., this article says the use of PDF plug-in process.

  • The iframe tag is available for links that do not have the content-disposition header set on the server side, as shown below:



Want to copy the code as follows:

<iframe src="http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf" width="100%" height="100%">
       This browser does not support PDFs. Please download the PDF to view it: <a href="/test.pdf">Download PDF</a>
</iframe>Copy the code

The following information is displayed:



If the PDF has a lot of pages, you don’t have to worry about paging, you can automatically swipe down to turn pages, which looks good, but continue to see —–>

We change the above link to ‘https://ecs7.tokopedia.net/instant-loan/file/29a2218e-bef9-44cb-b92b-8e81bc4d5228_DOC-20171013-WA0035.pdf’, found What is it? Look at the screenshots… It’s also a PDF link, why not this one?



No, no, no, put the link above in the browser and press Enter to see the response header:

content-disposition:attachment; filename=”DOC-20171013-WA0035.pdf”

This is why we have to pop up the download box. Since these files are stored on the remote server, they want to let the back end to see if they can detect the response header, but they don’t bother to process it, so they have to process it themselves. In this case, there are many solutions on the Internet, and I have tried it. The middle is also borrowed from an article, according to their own needs, to do a simple treatment.

https://www.2cto.com/kf/201803/728492.html 
Copy the code

The process is as follows:

  1. Run NPM install PDF-dist –save
  2. Create two files in the Comments directory: pdf.vue and index.js

<! -- pdf.vue --> <template> <div id="container" :class="{'back': isShow}">      <canvas id="the-canvas"></canvas> <! --> <span :class="{'close':isShow}" @click="closePdf">close</span>      <p class="foot" v-if="pdfDoc">        <Button class="left" @click="onPrevPage" v-if="pageNum>1"< p style = "max-width: 100%; clear: both"right" @click="onNextPage" v-if="pageNum<pdfDoc.numPages"</Button> </p> </div> </template><script>import PDFJS from'pdfjs-dist' export default {  data () {    return {      isShow: false,// Use this property to dynamically add classes to make the PDF show or hide pdfDoc: null,// can print the discovery is an object, which contains page number information, etc.false, pageNumPending: null, scale: 0.9}}, methods: {closePdf(){      this.isShow = false    },    showPDF (url) {      this.isShow = true      let _this = this      PDFJS.getDocument(url).then(function (pdf) {        _this.pdfDoc = pdf        _this.renderPage(1)      })    },    renderPage (num) {      this.pageRendering = true      let _this = this      this.pdfDoc.getPage(num).then(function (page) {        var viewport = page.getViewport(_this.scale)        let canvas = document.getElementById('the-canvas') canvas.height = viewport.height canvas.width = viewport.width // Render PDF page into canvas context var renderContext  = { canvasContext: canvas.getContext('2d'),          viewport: viewport        }        var renderTask = page.render(renderContext)         // Wait for rendering to finish        renderTask.promise.then(function () {          _this.pageRendering = false          if(_this.pageNumPending ! == null) { // New page rendering is pending this.renderPage(_this.pageNumPending) _this.pageNumPending = null } }) }) },  queueRenderPage (num) {if (this.pageRendering) {        this.pageNumPending = num      } else {        this.renderPage(num)      }    },    onPrevPage () {      if (this.pageNum <= 1) {        return      }      this.pageNum--      this.queueRenderPage(this.pageNum)    },    onNextPage () {      if (this.pageNum >= this.pdfDoc.numPages) {        return      }      this.pageNum++      this.queueRenderPage(this.pageNum)    }  }}</script><style scoped="" type="text/css"Background-color: rgba(0, 0, 0, 0.788); background-color: rgba(0, 0, 0, 0.788); position:fixed; width: 100%; height: 100%; top: 0; left: 0; text-align: center; padding: 20px; z-index: 100; overflow: scroll; }.close{ position: absolute; right: 20px; top: 20px; z-index: 200; color:#fff; cursor: pointer; } .foot { position: absolute; bottom: 50px; left: 50%; transform: translate(-50%,0); }
Copy the code

// index.jsimport PDF from './pdf' var $vmexport default {  install (Vue, options) {    if (!$vm) {      const PDFPlugin = Vue.extend(PDF)      $vm = new PDFPlugin().$mount()      document.body.appendChild($vm.$el)    }    Vue.prototype.$showPDF = function (url) {      $vm.showPDF(url)    }  }}Copy the code

3. Import in main.js

import pdf from './components/pdf'
Vue.use(pdf)Copy the code

In this way, it can be used globally, and when used, it can be used directly. In this article, a click event is added to the place where a picture is displayed, and the function can be triggered when clicked.

function showPdf() {let url = 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf'        // let url = 'https://ecs7.tokopedia.net/instant-loan/file/29a2218e-bef9-44cb-b92b-8e81bc4d5228_DOC-20171013-WA0035.pdf'        this.$showPDF(url)}Copy the code

Close function is added in this paper. Click close to close the PDF display. At the same time, there is pagination function in the component.



The above is the process of my implementation, as for the cross-domain problem, I have not encountered, now it is local access can, wait until the online to see whether it is ok, if not, then add method implementation later.

     

Tell my dear self, accumulate a little bit every day, let their continuous growth ！！！！