您当前的位置：主页 > 技术探讨 >

打印功能开发攻略

时间：2021-07-02 10:37 日记人：arlen.zhou

 
本次项目遇到巨坑，此次项目因为涉及硬件一体，类似银行大厅的机器，需要你刷身份证读取，开发者需要留意的是 object调取三方注册控件时候所产生的坑。。
 
 <object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0>
    <embed id="LODOP_EM" type="application/x-print-lodop" width=0 height=0></embed>
  </object>
  <object id="CMTSiCardCtrl" width="0" height="0" classid="clsid:83B8BF6B-47E8-4EA6-8469-FACE69C09708" align="center"
    codebase="MTIDCard.cab#version=1,0,0,1" hspace="0" vspace="0">
  </object>
 
涉及知识技术：Lodop、C-Lodop  js  print  ie11 vue
 
pdf转img   方法代码，主要用了pdf.js   pdf.worker.min.js  这个坑主要用于ie浏览器，不兼容pdf问题。不过最后出于性能考虑 ，还是后端用转成图片使用。。前后端 都可以将pdf转图片。。。

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.worker.min.js" type="text/javascript"></script>　
   //url参数是pdf地址，imgUrl是最后的base64格式图片
      showPdf = function () {
        var url = '3477706119731759459.pdf';
        let _this = this;
        let imgArr = [];
        pdfjsLib.workerSrc = 'pdf.worker.js';
        let loadingTask = pdfjsLib.getDocument(url);
 
        loadingTask.promise.then(function (pdf) {
          console.log('PDF loaded');
          let pageNum = pdf.numPages;
          // console.log(pageNum);
          for (let i = 1; i <= pageNum; i++) {
            pdf.getPage(i).then(function (page) {
              console.log('Page loaded');
 
              let scale = 2;
              let viewport = page.getViewport(scale);
              var CSS_UNITS = 96.0 / 72.0;
 
              // let canvas = document.getElementById('the-canvas');
              let canvas = document.createElement("canvas");
              let context = canvas.getContext('2d');
              // canvas.height = viewport.height;
              // canvas.width = viewport.width;
 
              canvas.height = Math.floor(viewport.height * CSS_UNITS);
              canvas.width = Math.floor(viewport.width * CSS_UNITS);
 
              let renderContext = {
                transform: [CSS_UNITS, 0, 0, CSS_UNITS, 0, 0],
                canvasContext: context,
                viewport: viewport
              };
              let renderTask = page.render(renderContext);
              renderTask.then(function () {
                console.log('Page rendered');
                let imgUrl = canvas.toDataURL('image/jpeg'); //转换为base64
                if (imgUrl) {
                  imgArr[i - 1] = imgUrl;
                }
                console.log(imgUrl);
                document.getElementById("img-url").src = imgUrl;
 
              });
            });
          }
        }, function (reason) {
          console.error(reason);
        });
 
        function isEmpty(arr) {
          for (let i = 0; i < arr.length; i++) {
            if (!arr[i])
              return true;
          }
          return false;
        }
      }

感悟：各位看官，以后如果项目涉及到打印功能，我推荐使用三方控件打印，浏览器的打印，除非是使用谷歌，否则还是用 c-lodop吧！ （c-lodop或者其他的三方控件，虽然是要给几百块钱的，但是可以方便很多，整体来说还是比较值）
这个项目太难了搞不动了？？？不可能的~~~哈哈哈。。。。