vue+better-scroll+pdfjs-dist实现pdf文件预览放大缩小翻页功能

前些天，公司的一个移动端项目中，有个这样的需求，点击按钮，请求后台获取PDF地址，实现PDF预览，需要放大缩小翻页功能。因为之前没做过，在百度谷歌乱搜一通，有用标签iframe、embed、object的，也有用PDFObject的，还有用PDF.js的。前者用标签的方法我一一试过，没成功，特别是结合vue开发。后者经过尝试，我优先用了在PDF.js的基础上做了一点点改动封装。当然，网上也有些类似的封装，类似于vueshowpdf、vue-pdf。

DEMO源码上传至github：https://github.com/xiao0502/vue-to-pdf

准备工作：

    1.    npm install pdfjs-dist -S // => 安装pdfjs-dist依赖
    2.    npm install better-scroll -S // => 安装better-scroll依赖
    3.    初始化PDF
          => 3.1 利用require引入，别用Import
            let pdfJS = require('pdfjs-dist').PDFJS; 
          => 3.2 把pdfJS的的workerSrc指向pdf.worker.js
            pdfJS.workerSrc = require('pdfjs-dist/build/pdf.worker.min');
          => 3.3 获取DOM中为预览PDF准备好的canvasDOM对象
            var canvas = document.getElementById('the-canvas');
          => 3.4  初始化pdf文件渲染
            let vm = this;
            pdfJS.getDocument(this.url).then(function getPdfHelloWorld(pdf) {
                pdf.getPage(num).then(function getPageHelloWorld(page) {
                    if (vm.initFlag) {
                        vm.scale = document.body.getBoundingClientRect().width / page.view[2];
                        vm.minScale = vm.scale;
                    }
                    vm.initFlag = false;
                    var viewport = page.getViewport(vm.scale);
                    var context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    var renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };
                    page.render(renderContext);
                    document.querySelector('.scroll-content-info').style.width = document.querySelector('#the-canvas').getBoundingClientRect().width + 'px';
                    vm.$refs.scroll.refresh();
                    vm.isLoading = false;
                });
            });
           => 3.5 设置PDF总页数
            pdfJS.getDocument(this.url).then(function (pdfDoc_) { //初始化pdf
                vm.pdfDoc = pdfDoc_;
                vm.pageTotal = vm.pdfDoc.numPages;
            }).catch(function (err) {
                if (err) {
                    console.log(err)
                    vm.throwerr(vm.pdfurl)
                }
            })
            => 3.6 上述变量解释
              this.url // => 从后台获取的pdf urldi地址
              num // => 渲染PDF的当前页
              initFlag // => 判断PDF渲染是否是第一次，因为第一次的时候要计算PDF的缩放，刚好满足手机屏幕的最大宽度，即一屏显示完整
              minScale // => PDF的最小缩放值（正常为1，这里最小为计算出来的一屏显示）
              scale // => 缩放值
              document.querySelector('.scroll-content-info').style.width = document.querySelector('#the-canvas').getBoundingClientRect().width + 'px';
              vm.$refs.scroll.refresh();
              上述两行是设置better-scroll 横向滚动的宽度和重新计算滚动宽高度
              对better-scroll不太了解的同学可以顺便学习下，个人接触到的做移动端滚动
              结合vue项目做开发最好的插件，地址：https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll 是什么

    4.      放大缩小翻页功能，只需要改变上述变量的scale值和num值，然后重新初始
            化就行，这里有个坑，因为是对同一个canvas操作，当canvas还没有渲染完成的候，
            快速点击放大缩小或者翻页再次对同一canvas操作的话，就会报错。我这里的处理办法
            是实现放大缩小翻页功能的时候，删除原来的canvas，重新渲染到新的canvas上面