vue插件开发使用pdf.js实现手机端在线预览pdf文档

超、凢脫俗 2022-05-28 23:07 579阅读 0赞

目前大多数PC浏览器支持在线预览pdf文件，但大多数手机浏览器还未支持，尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框。网上查了一些资料，在实现的过程中，还是走了比较多的弯路，最后采用了倍受推荐的pdf.js插件来实现（文末附Demo）。

pdf.js可以从github上clone下来，然后本地gulp生成可用的pdf.js和pdf.worker.js（参考readme即可）。github地址是：[https://github.com/mozilla/pdf.js][https_github.com_mozilla_pdf.js]。

不过更简单的方法是使用cnpm来安装： cnpm isntall --save pdfjs-dist，然后可以在项目中使用了，我写成了插件的形式。具体使用示例：

pdf.vue

<template>
      <div id="container">
        
          <canvas id="the-canvas"></canvas>
          <div class="foot" v-if='pdfDoc'>
            <button class='left' v-if="pageNum>1" @click="onPrevPage">上一页</button>
            <button class='right' v-if="pageNum<pdfDoc.numPages" @click="onNextPage">下一页</button>
          </div>
        
      </div>
    </template>
    <script>
    import PDFJS from 'pdfjs-dist'
    
    export default {
      data () {
        return {
          pdfDoc: null,
          pageNum: 1,
          pageRendering: false,
          pageNumPending: null,
          scale: 0.9
        }
      },
      methods: {
        showPDF (url) {
          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>
    #container {
      background-color: rgba(0,0,0,0.75);
      position:fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      text-align: center;
      padding: 5px;
    }
    
    .pdf-page {
    
    }
    
    .foot {
      position: fixed;
      transform: translate(-50%,0);
      left: 50%;
    }
    </style>

index.js:

import PDF from './PDF'
    
    var $vm
    export 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)
        }
      }
    }

把两个文件放到同一文件夹pdf中形成一个插件，在main.js引入并use：

import pdf from '@/components/pdf'
    Vue.use(pdf)

这样，在需要显示pdf的地方调用vue的$showPDF方法即可。

效果显示（手机浏览器验证显示正常）：

![70][]

不过需要注意一点问题是：

pdf.js不能处理跨域文件和本地文件，所以本地调试的时候应该请求服务器的文件，如果请求的是远程服务器，存在跨域，那就需要在config/index.js中配置一下代理：

// ...
        proxyTable: {
          '/media': {
            target: 'https://xxxx.cn', // 换成正确的服务器域名
            changeOrigin: true,
            pathRewrite: {
              '^/media': '/media'
            }
          }
        }
        // ...

然后在使用的地方填相对路径即可：

// ...
      mounted () {
        this.$showPDF('/media/up/2018/3/9/494079c7ec333bd371798dd0a73c0a0b.pdf')
      }
      // ...

\------------------------------

2018.05.28更新

对于有小伙伴提出的模糊性问题，在网上查找了一些资料后发现canvas显示模糊与设备像素比有关系，所以重写了一个Demo。优化了自适应屏幕大小显示、多页显示，解决了模糊性问题。附地址：[https://github.com/Lushenggang/show-pdf][https_github.com_Lushenggang_show-pdf]

\-----------------------------

2019.06.04更新

写了一个改进版本，一次性加载改进为分页加载，地址：[https://github.com/Lushenggang/pdf-preview][https_github.com_Lushenggang_pdf-preview]

[https_github.com_mozilla_pdf.js]: https://github.com/mozilla/pdf.js
[70]: /images/20220529/ffdee84ec79f4847a26a1a01303b50f3.png
[https_github.com_Lushenggang_show-pdf]: https://github.com/Lushenggang/show-pdf
[https_github.com_Lushenggang_pdf-preview]: https://github.com/Lushenggang/pdf-preview