作者：Hanpeng Chen
公眾號：前端極客技術(shù)
原文鏈接：https://www.chenhanpeng.com/PDF.js-use

背景

現(xiàn)在很多項目開發(fā)過程中都會碰到PDF在線預(yù)覽的需求，對于PC端瀏覽器，一般直接提供PDF文件，iframe一下就可以直接預(yù)覽。但在移動端要預(yù)覽PDF則較為麻煩，有些瀏覽器檢測到文件流，就會直接下載，無法實現(xiàn)預(yù)覽功能。

PDFJS就是解決這一問題比較好用的一款插件。

PDF.js

PDF.js是一個使用HTML5構(gòu)建的可移植文檔格式庫。

PDF.js官網(wǎng)：http://mozilla.github.io/pdf.js/

官網(wǎng)給出的使用方法是將PDF.js下載到項目靜態(tài)資源目錄中，在html文件中引入pdf.js去使用，但這樣會導(dǎo)致最后項目編譯打包后的資源包比較大。

pdfjs-dist這一node庫這好可以解決我們的問題。pdfjs-dist是pdf.js源代碼的預(yù)構(gòu)建版本，我們直接在項目中引入該庫即可使用，接下來我們介紹如何使用。

需要預(yù)覽的PDF一般是后臺接口返回的base64編碼數(shù)據(jù)或者是本地上傳獲取到文件，接下來我們在vue工程上實現(xiàn)本地上傳PDF文件，獲取文件的base64編碼，利用pdf.js實現(xiàn)預(yù)覽效果。

基于Vue工程實現(xiàn)PDF在線預(yù)覽

1、安裝pdfjs-dist依賴

npm install pdfjs-dist

2、初始化PDF，核心代碼

      previewPDF() {
        // 引入pdf.js的字體
        let CMAP_URL = 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/'
        //讀取base64的pdf流文件
        let loadingTask = pdfJS.getDocument({
          data: this.pdfData, // PDF base64編碼
          cMapUrl: CMAP_URL,
          cMapPacked: true
        })
        loadingTask.promise.then((pdf) => {
          this.loadFinished = true
          let numPages = pdf.numPages
          let pageNumber = 1
          this.getPage(pdf, pageNumber, numPages)
        })
      },
      getPage(pdf, pageNumber, numPages) {
        let _this = this
        pdf.getPage(pageNumber)
          .then((page) => {
            // 獲取DOM中為預(yù)覽PDF準(zhǔn)備好的canvasDOM對象
            let canvas = this.$refs.myCanvas
            let viewport = page.getViewport(_this.scale)
            canvas.height = viewport.height
            canvas.width = viewport.width

            let ctx = canvas.getContext('2d')
            let renderContext = {
              canvasContext: ctx,
              viewport: viewport
            }
            page.render(renderContext).then(() => {
              pageNumber += 1
              if (pageNumber <= numPages) {
                _this.getPage(pdf, pageNumber, numPages)
              }
            })
          })
      }

3、效果

vue-pdfjs-demo.png

4、注意點

當(dāng)PDF文件中有中文的情況下，在引用pdfjs過程中可能會出現(xiàn)中文不顯示問題，在console中會報下面的錯誤，

Warning: The CMap "baseUrl" parameter must be specified, ensure that the "cMapUrl" and "cMapPacked" API parameters are provided.

主要原因是有pdf不支持的字體格式，可以通過引入pdf.js的字體來解決該問題。

// 引入pdf.js的字體
let CMAP_URL = 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/'
//讀取base64的pdf流文件
let loadingTask = pdfJS.getDocument({
  data: this.pdfData, // PDF base64編碼
  cMapUrl: CMAP_URL,
  cMapPacked: true
})

完整代碼獲?。?/strong>
https://github.com/Hanpeng-Chen/hampton-demo-repo/tree/master/example-project