使用場景及原因

• 實際業務中，一些說明書或協議僅支援使用者線上預覽，為避免使用者自行下載，並進行修改，引發糾紛，特將檔案已檔案流的形式，傳給前端並轉為圖片顯示，此時可能會有人問，為什麼不直接在後端轉圖片，前端直接展示呢？那是因為當系統使用者數量較高時，高併發會時伺服器有很大的壓力，可能會導致系統壓測不能通過，前端轉圖片，可以將處理壓力分攤至每個客戶端。

• 本次操作為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>