vue移动端预览pdf功能（可以多页）以及第三方电子签章不能正常展示解决方案（多种）

随着网络的发展，PC端的网站已不能满足人们的需求，人们更喜欢采用移动端进行业务操作。最近公司要求把PC端网站的订单合同签署功能移植到微信端，而不再局限于PC端操作。

对于这样的要求，我们需要了解的是订单合同，协议书之类的一般都属于不可以任意修改的文件（PDF），这样的文件，现在的浏览器基本都支持直接访问的。但是遗憾的是，移动端并不支持直接访问，这样我们需要对PDF文件进行解析处理。首先我们考虑到通过服务器访问到PDF文件，传递到前端，再由前端进行解析处理。

这里前端框架采用vue，vue中有整合到第三方pdf解析库pdfjs-dist

1、安装 pdfjs-dist

npm install pdfjs-dist --save

2、创建pdf组件 pdf-component.vue

<template>
  <div>
    <canvas v-for="page in pages" :id="'the-canvas'+page" :key="page"></canvas>
  </div>
</template>

<script>
import PDFJS from 'pdfjs-dist'
const Base64 = require('js-base64').Base64

export default {
  name: 'pdf-component',
  data () {
    return {
      title: '查看合同',
      pdfDoc: null,
      pages: 0
    }
  },
  methods: {
    _renderPage (num) {
      this.pdfDoc.getPage(num).then((page) => {
        let canvas = document.getElementById('the-canvas' + num)
        let ctx = canvas.getContext('2d')
        let dpr = window.devicePixelRatio || 1
        let bsr = ctx.webkitBackingStorePixelRatio ||
                  ctx.mozBackingStorePixelRatio ||
                  ctx.msBackingStorePixelRatio ||
                  ctx.oBackingStorePixelRatio ||
                  ctx.backingStorePixelRatio || 1
        let ratio = dpr / bsr
        let viewport = page.getViewport(screen.availWidth / page.getViewport(1).width)
        canvas.width = viewport.width * ratio
        canvas.height = viewport.height * ratio
        canvas.style.width = viewport.width + 'px'
        canvas.style.height = viewport.height + 'px'
        ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
        let renderContext = {
          canvasContext: ctx,
          viewport: viewport
        }
        page.render(renderContext)
        if (this.pages > num) {
          this._renderPage(num + 1)
        }
      })
    },
    _loadFile (url) {
      PDFJS.getDocument(url).then((pdf) => {
        this.pdfDoc = pdf
        this.pages = this.pdfDoc.numPages
        this.$nextTick(() => {
          this._renderPage(1)
        })
      })
    }
  },
  mounted () {
    document.title = this.title
    let url = Base64.decode(this.$route.query.url)
    this._loadFile(url)
  }
}
</script>

<style scoped>
canvas {
  display: block;
  border-bottom: 1px solid black;
}
</style>

3、路由配置

{
  path: '/pdf',
  name: 'pdf',
  component: () => import('@/components/public/pdf-component'),
  meta: {
  }
}

4、点击跳转事件

_loadingPdf (id) {
   let url = '/api/orders/findPdfById/' + id
   this.$router.push({ name: 'pdf', query: { url: Base64.encode(url) } })
}

整个前端加载pdf功能已全部做完。代码量不多，在测试中一个1M左右的pdf文件在页面渲染时间大约在3秒左右，如果有多页的则需要更多时间，效率上并不是很理想。

<template>
  <div>
    <img v-if="imgSrc" :src="imgSrc">
  </div>
</template>

<script>
const Base64 = require('js-base64').Base64
export default {
  data () {
    return {
      title: '查看合同',
      imgSrc: '',
      pages: 0
    }
  },
  methods: {
  },
  mounted () {
    document.title = this.title
    this.imgSrc = Base64.decode(this.$route.query.url)
  }
}
</script>

<style scoped>
  img {
  display: block;
  border-bottom: 1px solid black;
}
</style>