vue中如何實現pdf文件預覽？

今天產品提出一個優化的需求，就是以前咱們作的圖片展現就是一個img標籤搞定，因爲咱們作的是海外後臺管理系統，那邊的人上傳的文件時pdf格式，vue本事是不支持這種格式文件展現的，因而就google搜索，發現有iframe、embed、vueshowpdf(測試了不咋好用)、pdf等，本文說一下pdf插件的使用過程。

• 說明：iframe標籤這種，對於有的連接是能夠的，好比這種連接在服務器端沒有設置享有頭content-disposition,就能夠直接顯示，以下：

想複製代碼以下：

<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>複製代碼

顯示效果以下：

      若是pdf有不少頁，也不用考慮分頁功能，自動能夠向下滑動就翻頁，看着挺好，可是，且往下繼續看----->

      咱們把上邊的連接換成'https://ecs7.tokopedia.net/instant-loan/file/29a2218e-bef9-44cb-b92b-8e81bc4d5228_DOC-20171013-WA0035.pdf',發現什麼了？快看截圖。。。一樣是pdf連接，怎麼這個就不行？

什麼狀況，下載框，必須下載才能看到，那多影響體驗，下到本地還佔我磁盤，不行不行，把上邊那個鏈接放到瀏覽器，回車看一下響應頭部：

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

就是它，讓咱們必須彈出下載框，因爲這些文件是在遠程服務器上存貯着，想着讓後端看能不能檢測到這個響應頭，他們也懶得處理，後來只能本身處理了，鑑於這種狀況，網上也是有不少解決辦法的，本人試驗過能夠的。中間也是借用了一篇文章 ，根據本身需求，作了簡單的處理。

https://www.2cto.com/kf/201803/728492.html 
複製代碼

過程以下：

1. 執行npm install pdf-dist --save
2. 在comments目錄下建立兩個文件：pdf.vue 和 index.js

<!-- pdf.vue -->

<template>      <div id="container" :class="{'back': isShow}">      <canvas id="the-canvas"></canvas>      <!-- //添加關閉pdf功能 -->      <span :class="{'close':isShow}" @click="closePdf">close</span>      <p class="foot" v-if="pdfDoc">        <Button class="left" @click="onPrevPage" v-if="pageNum>1">上一頁</Button>        <Button class="right" @click="onNextPage" v-if="pageNum<pdfDoc.numPages">下一頁</Button>      </p>      </div>  </template><script>import PDFJS from 'pdfjs-dist' export default {  data () {    return {      isShow: false,//經過該屬性動態添加類，讓pdf顯示或隱藏      pdfDoc: null,//能夠打印發現是一個對象，裏面有頁數信息等      pageNum: 1,      pageRendering: 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">.back {  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);}</style>
複製代碼

// 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)    }  }}複製代碼

3. 在main.js中引入

import pdf from './components/pdf'
Vue.use(pdf)複製代碼

這樣就能夠全局使用了，使用的時候就直接使用，本文是在一個圖片展現 的地方加上一個點擊事件，點擊時觸發該函數便可；

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)}複製代碼

文中添加了關閉功能，點擊close便可關閉pdf的展現, 同時組件中也有分頁功能，若是頁數大於1就會顯示下一頁按鈕；

以上既是本人實現的過程，至於跨域問題，我這邊還沒遇到，如今是本地訪問能夠的，等到線上再看看行不行，若是不行後邊再追加方法實現。

     

告訴親愛的本身，天天積累一點點，讓本身不斷的成長吧！！！！