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

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>