vue中如何實現pdf文件預覽的方法

2019-11-19 13:30:33

字體：大中小

來源：轉載

供稿：網友

今天產品提出一個優化的需求，就是之前我們做的圖片展示就是一個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" rel="external nofollow" >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"

就是它，讓我們必須彈出下載框，由于這些文件是在遠程服務器上存貯著，想著讓后端看能不能檢測到這個響應頭，他們也懶得處理，后來只能自己處理了，鑒于這種情況，網上也是有很多解決辦法的，本人試驗過可以的。中間也是借用了一篇文章，根據自己需求，做了簡單的處理。

http://www.survivalescaperooms.com/article/143646.htm

過程如下：

執行npm install pdf-dist --save
在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'exportdefault { 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 $vmexportdefault { 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就會顯示下一頁按鈕；