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

使用场景及原因

• 实际业务中，一些说明书或协议仅支持用户在线预览，为避免用户自行下载，并进行修改，引发纠纷，特将文件已文件流的形式，传给前端并转为图片显示，此时可能会有人问，为什么不直接在后端转图片，前端直接展示呢？那是因为当系统用户数量较高时，高并发会时服务器有很大的压力，可能会导致系统压测不能通过，前端转图片，可以将处理压力分摊至每个客户端。

• 本次操作为Vue.js + pdf.js

• 因个人需求不同，并未做打包处理，可自行单独下载文件，下载地址：
  
  - 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
  
  - 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>