Vue.js +pdf.js 处理响应pdf文件流数据，前端转图片预览不可下载

使用场景及原因

• 实际业务中，一些说明书或协议仅支持用户在线预览，为避免用户自行下载，并进行修改，引发纠纷，特将文件已文件流的形式，传给前端并转为图片显示，此时可能会有人问，为什么不直接在后端转图片，前端直接展示呢？那是因为当系统用户数量较高时，高并发会时服务器有很大的压力，可能会导致系统压测不能通过，前端转图片，可以将处理压力分摊至每个客户端。
• 本次操作为Vue.js + pdf.js
• 本案例是本人写的一个小demo，有问题的同学，或运行不了，欢迎评论区留言探讨
• 因个人需求不同，并未做打包处理，可自行单独下载文件，下载地址：
  - qs ：https://pan.baidu.com/s/1061b1m4TU9wodKD9pUnA3w | x9z6
  - axios ：https://pan.baidu.com/s/19OAkzPSqMKyxTayc5uO6IA | 1pmt
  - vue ：https://pan.baidu.com/s/1mPArC55yCjlgN0Xt8abKkQ | 5eyk
  - pdf ：https://pan.baidu.com/s/1gnUkYSpKa0M08wm6k8oScw | addd （ 负责API解析）
  - pdf.worker : https://pan.baidu.com/s/1LWPD88CE9EQ9ieSv4k6smA | wbi2 ( pdf.worker 需要放在pdf.js 相同的目录—— 负责核心解析 ）
  - polyfill ：https://pan.baidu.com/s/122iutoH-P5jDWLKtRiAPQg | g3tq

      <div id="app" v-cloak>
          <p><a @click="showAgreementBook">预览产品说明书</a></p>
          <div class="pdfList"></div>
      </div>

      <!--由于axios默认发送请求时，数据格式是Request Payload，并非我们常用的Form Data格式，后端未必能正常获取到，所以在发送之前，需要使用qs模块对其进行处理。-->
      <script src="js/lib/qs-6.5.1.min.js"></script>  
      <script src="js/lib/axios-0.19.2.min.js"></script>
      <script src="js/lib/vue-2.6.11.min.js"></script>
      <script src="js/lib/pdf.js"></script>
      <!-- HTML中直接引入vue.js 文件，IE下显示不正常，而且还报错：**[Vue warn]: Error in v-on handler: "ReferenceError: “Promise”未定义"**-->
      <script src="js/lib/polyfill.min.js"></script>
      <!-- <script src = "https://polyfill.io/v2/polyfill.min.js"></script> -->
      <script>
      var app = new Vue({
        el: "#app",
        data: {
          insBookData: '', // 协议说明书文件流
        },
        mounted:funciton(){
            this.instructionBook('MC002')
        },
        methods: {
          // 获取协议说明书文件流
          instructionBook: function (code) { 
            var _this = this
            axios({    
              method: 'post',
              url: 'XXXX',
              data: Qs.stringify({prodCd: code}),
              headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
            }).then(function (res) {
              _this.insBookData = 'data:application/pdf;base64,' + res.data.ITReq
            })
           },
           // base64 转blob ，用作处理IE兼容
           dataURItoBlob: function (base64Data) {
             var byteString;
             if (base64Data.split(',')[0].indexOf('base64') >= 0)
               byteString = atob(base64Data.split(',')[1]); //base64 解码
             else 
               byteString = unescape(base64Data.split(',')[1]);               
             var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0]; //mime类型 -- image/png
             var ia = new Uint8Array(byteString.length); //创建视图
             for (var i = 0; i < byteString.length; i++) {
               ia[i] = byteString.charCodeAt(i);
             }
             var blob = new Blob([ia], {
               type: mimeString
             });
             return blob;
           },
           // 点击按钮 预览操作
           showAgreementBook: function () {
              // for IE
              if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                var blob = this.dataURItoBlob(this.insBookData)
                window.navigator.msSaveOrOpenBlob(blob);
              } else {
                var pdfList = document.querySelector('.pdfList')
                pdfList.innerHTML = ''
                var loadingTask = pdfjsLib.getDocument(this.insBookData);
                loadingTask.promise.then(function (pdf) {
                  var pages = pdf.numPages  // 获取pdf文件页数
                  for (var i = 1; i <= pages; i++) {
                    pdf.getPage(i).then(function (page) {
                      var scale = 1.3;
                      var viewport = page.getViewport({scale: scale});
                      var canvas = document.createElement('canvas')  // 生成canvas画布
                      var context = canvas.getContext('2d');
                      canvas.height = viewport.height;
                      canvas.width = viewport.width;
                      var renderContext = {
                        canvasContext: context,
                        viewport: viewport
                      }
                      pdfList.appendChild(canvas)   // 追加canvas元素至页面中
                      page.render(renderContext);   // 渲染
                   });
                 }
               });
             }
           } 
         }
        });
      </script>