vue移动端pdf预览

pdf预览，在项目中是很常见的需求，在PC端web项目中，我们可以使用window.open(url)直接打开pdf进行预览，那么移动端虽然我们也可以使用此方法，但是这是新开了一个webview页面，里面的内容也不是我们可以控制的，如果我们想在自己的写的页面中直接预览pdf,怎么做呢？

vue-pdf

我们可以使用此插件来进行pdf预览处理：插件地址

Install

npm install --save vue-pdf

通常pdf都是有多页的，当然插件也是支持多页展示的，移动端通过上下滑动来查看pdf。

多页展示

      <pdf
          v-for="i in numPages"
          ref="pdfs"
          :src="pdfSrc"
          :key="i"
          :page="i"
        >
        </pdf>

在这里，每一页pdf其实就是一个个canvas拼凑而成，numPages变量值的获取需要从pdf对象中获取。
vue-pdf提供了一个公共静态方法：createLoadingTask(src)
这个方法会创建一个当前pdf的加载任务，可以作为:src使用或者公开的获取当前pdf的页面总数。

关键代码

import pdf from 'vue-pdf'

this.pdfSrc = pdf.createLoadingTask(this.pdfSrc)
this.pdfSrc.then(pdf => {
   this.numPages = pdf.numPages
 })

小米机型预览问题

vue-pdf提供的props:src可以传入pdf的url地址，也可以base64字符串。但在小米机型下，使用线上url地址时，pdf加载不出来。这里，我们可以统一让后台处理下,返回base64字符串，这样在移动端任何机型下都能完整加载出pdf内容。

this.pdfSrc = `data:application/pdf;base64,${res.pdfBase64Str}`

pdf双指缩放

vue-pdf本身并没有提供api实现pdf的缩放功能，这里可能需要我们自己实现一下，首先关于移动端的手势指令，我们可以用腾讯开发的手势库：腾讯AlloyFinger，也可使用基于腾讯手势库封装的vue版本：any-touch。

在触发手势事件后，我们就可以去操作pdf的缩放了，上面已经提过每一页pdf内容实质上都是一个个canvas,我们可以调整canvas的宽高、或是加上transform:scale来进行pdf缩放。

// 通过$refs.pdfs拿到的是数组（多个canvas拼接而成）
this.$refs.pdfs[0].$refs.canvas // 获取canvas节点
this.$refs.pdfs[0].$refs.canvas.style.width = 'xxxpx'
this.$refs.pdfs[0].$refs.canvas.style.transform = 'scale(1.5)'