安卓端微信 H5 实现在线 PDF 预览

背景

安卓端微信浏览器无法实现 PDF 在线预览，搜索引擎的结果也不太理想，结合了几篇文章，终于实现了需求。废话不多说，手摸手教你如何使用pdf.js实现 PDF 在线预览。

准备工作

首先到 pdf.js官网 下载官方提供的 demo。不同版本文件可能有略微差别，我下载的是v2.13.216，v2.13.216 github 下载链接。解压后的目录是这样的：

修改源码

这个 demo 实现了本地文件的预览，但是不支持跨域文件加载。我的需求是预览远端的 PDF，所以需要做一些处理。

打开 web 目录下的viewer.js

修改默认加载文件参数

修改defaultUrl参数，这个参数是指定默认加载的文档地址，直接修改为空字符串。同目录下的示例 PDF 文件也可以删掉了。

解除跨域限制

在文件的 2160 行左右，注释掉框选的这几行即可。

在项目中使用

在 Vue 项目中使用

1. 将整个目录移动到public文件夹下
2. 新建PdfViewer.vue，在 Vue 文件中使用iframe引用，通过prop传递 PDF 地址

  export default ({  props: {    url: {      type: String,      required: true    }  },})

1. 使用时，直接通过prop传值

      
预览PDF
      import PdfViewer from './PdfViewer.vue';export default {  components: {    PdfViewer  },  data: function() {    return {      url: '',    }  },  methods: {    viewPDF: function() {      this.url = 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf'    },  }}

1. 如果没有半屏展示的需求，也可以在需要浏览 PDF 时直接将页面跳转到viewer.html，像这样：

viewPDF: function () {  window.location.href = [项目前端地址] + '/pdf/web/viewer.html?file=远端PDF地址'}

1. 效果展示

在 React 项目中使用

在 React 项目中使用和 Vue 差不多，一样的道理，这里我用的是create-react-app搭起来的demo。

1. 将整个目录移动到public文件夹下
2. 新建PDFViewer.js，也是使用iframe进行引用

function PDFViewer({ file }) {  return (    `/pdf/web/viewer.html?file=${file}`}  )}export default PDFViewer;

1. 使用时和 Vue 一样，通过prop传值

'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf'} /

1. 直接通过地址跳转的和 Vue 一样，就不再赘述了，直接看效果吧

移动端适配

看到有的文章还在解决移动端手势放大缩小的需求，感觉是伪需求，因为pdf.js的 demo 中已经做了放大和缩小的功能，只不过不明显。

将web/viewer.css末尾的几行代码注释掉，就会展示缩放比例的文字了，这样用户就可以意识到这里是可以调整比例的（产品经理把刀放下…）。

优化

在未经优化的情况下，光是pdf.js和pdf.worker.js两个核心文件大小加起来有将近2.5MB，对于移动端来说很影响访问体验。

将这两个文件都替换为压缩后的产物，再配合服务端nginx的gzip压缩，实际只需要传输不到350KB的资源，可以大大降低网络占用，Nice！

1. 首先下载 min 版的构建产物，我这个链接指向的是2.13.216版的，其他版本可以去 bootcdn 网站搜索。

• pdf.min.js
• pdf.worker.min.js
  1. 打开web/viewer.html，将引入的文件改为 min 版。
  2. 打开web/viewer.js，找到workerSrc参数，将加载的 worker 改为 min 版。

  大功告成

  参考文章： https://www.freesion.com/article/37741369420/