前言

pdfjs传送门
pdfjs + vue 移动端 踩坑记录，这个问题遇到过很多次，特此记录。

成功解决方案

  1. 去pdfjs的GitHub地址把代码拉下来；

  2. 没有glup的环境需要安装一下gulp:

    1
    npm install -g gulp-cli

  3. 安装项目依赖

    1
    npm install

  4. 运行服务,运行之后打开地址http://localhost:8888/web/viewer.html；

    1
    gulp server

    可以看到pdfjs库本身examples文件夹下提供了很多的例子，都可以预览看看，自己想要使用哪个版本；

  5. 打包

    1
    gulp generic-legacy

    打包之后build/generic-legacy下面就是打包后的内容；

  6. 将generic-legacy文件夹拷贝到vue项目里面，放到public目录下，这里需要注意一点，没必要放到src下，不用打包到app.js中徒增项目大小、降低了性能；上线之前可以把generic-legacy下的代码都压缩一下~

  7. 新建一个vue文件，用来预览pdf，url需要填写为具体项目的的具体文件地址，pdf的地址可以通过query传到当前页面(pdf的地址参数，具体逻辑具体分析)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
     <template>
      <div id="viewPdf">
        <iframe :src="url"></iframe>
      </div>
    </template>

    <script>
    export default {
      data() {
        return {
          url: ''
        };
      },
      created: function() {
        let pdflink = this.$route.query.url || '';
        this.url = `/generic-legacy/web/viewer.html?file=${pdflink}`;
        console.log('------' + this.url);
      },
    };
    </script>

    <style scoped lang="less">
    #viewPdf {
      width: 100%;
      height: 100%;
      background: #f5f5f5;
      box-sizing: border-box;
      iframe {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        border: none;
      }
    }
    </style>

  8. 这样就能正常的预览了，而且Android和ios端预览都没有问题，测试使用40+页的pdf,渲染速度也没有太慢~

踩坑历史

  1. 切勿使用examples下面的mobile-viewer,这个mobile-viewer真的一点都不mobile~, 使用之后ios预览是正常的，在大部分Android手机也行，但是也有不少比例的安卓手机上pdf无法loading，典型代表：华为手机鸿蒙系统；

  2. pdfjs最好使用最新版本，一开始用了一个老版本（版本号不详，老项目里的），如果pdf存在后台动态填充数据的情况，Android手机预览正常，ios则一直loading；

  3. 之前在vue项目中有使用pdfjs-dist包，然后按照examples/webpack版的例子集成到vue文件中，pdf预览正常，但是文字显示非常糊，就算是放大也看不清字；pdfjs默认是canvas渲染，换成svg的方式渲染后画面清晰了，非宋体的字体却又显示不出来！横竖是各种坑；后来通过把canvas画大两倍，解决绘画模糊，但是渲染性能实在鸡肋，最终放弃该方案！