vue使用pdf.js实现移动端在线PDF文件预览

原创

已于 2022-07-22 18:27:12 修改 · 7.2k 阅读

于 2022-07-22 18:25:30 首次发布

本文介绍了如何在Vue项目中利用pdf.js解决移动端在线PDF预览的需求，包括背景、选择pdf.js的原因、解决移动端适配和低端浏览器渲染问题的方法，并提供了参考资源。

背景

产品需求涉及到动态的PDF展示，PDF是由后端去生成的，然后下发给前端在线的cdn地址，H5需要实现在线PDF预览的能力

方案

H5展示合同PDF，有很多实现方式。但是通过尝试后发现在不同操作系统会存在兼容性问题

方案	表现
iframe的形式	iOS：只能展示第一页，多页不能展示 Android：弹出下载弹窗 PC：正常展示
embed标签	iOS：只能展示第一页 Android：弹出下载弹窗 PC：显示不出来
vue-pdf（基于pdfjs封装	各端都能正常展示，且可以根据需要展示PDF的全部页数，设定翻页操作，但是部署到生产环境时存在bug，且该库已经一年多没有维护了
pdf.js	各端均能正常展示

最终选择了使用pdf.js，日常开发中如果原生标签能满足的还是尽量用简单的方案处理，但是此次需求涉及到较为复杂的PDF操作，所以对比之下还是使用了插件的形式

解决方案

 <canvas
          v-for="page in pdfPages"
          :key="page"
          :id="'pdf-canvas' + page"
        />

<script>
  //以es5形式引入，解决低端浏览器兼容性问题
  const PDFJS = require("pdfjs-dist/es5/build/pdf");
  //pdfjs-dist的版本也是2.5.207
  PDFJS.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.5.207/pdf.worker.js";

  export default {
   
   
    name: "Contract",
    data: function () {
   
   
      return {
   
   
        pdfPages: [], //页数
        pdfWidth: "", // 宽度
        pdfSrc: '', //地址
        pdfDoc: "", //文档内容