html2pdf.js之長頁面html轉PDF導出

長頁面html轉PDF導出

html轉pdf的用法網上教程搜索一大堆，但公司遇到新需求，需要把6000條數據轉為pdf，頁面會變空白，后端推前端，前端推后端，那我們就自己研究下吧

網上教程我隨便找了一條，https://www.jianshu.com/p/56680ce1cc97 如果直接不是長頁面參考這個教程即可
為什么打印不了的原因，在html2pdf.js中渲染過程是由html轉稱canvas，再由canvas轉成pdf，作者明確指出在html5中canvas具有最大高度和寬度，超出最大限度便無法進行打印

canvas最大限度示例

Chrome:
Maximum height/width: 32,767 px
Maximum area: 268,435,456 px (例如, 16,384 x 16,384)

Firefox:
Maximum height/width: 32,767 px
Maximum area: 472,907,776 px (例如, 22,528 x 20,992)

IE:
Maximum height/width: 8,192 px
Maximum area: N/A

IE Mobile:
Maximum height/width: 4,096 px
Maximum area: N/A

那么我們知道了原因，可不可以將頁面拆分為較小的區塊，然后將它們單獨添加到 PDF 中呢？
答案是可以的。

使用注意

1. 打印前需要滾動到頁面頂部，不然打印頁面會出現一段空白
2. 需要引用以下文件

    // "jspdf.min.js"
    // "html2canvas.min.js"
    // "html2pdf.min.js"
    //單純使用js時，按照以上順序引用，不然canvas會把pdf覆蓋

    //使用vue時
    //安裝  npm install --save html2pdf.js
    //引用只需要引用html2pdf.js即可   import html2pdf.js from 'html2pdf.js';
    //因為html2pdf.js自動引用了jspdf和canvas

3. 在使用element ui框架時，內容在Dialog彈窗中時無法正常打印。
   可以嘗試使用divEle.cloneNode(true)拷貝一份添加到body上，再進行打印pdf
4. 如果打印的內容不清楚，可以使用scale：2來調節，但會增加文件大小

代碼示例

<button id="downpdf">按鈕</button>
<div id='divEle'>
      <ul>
            //我是數據
      </ul>
      <ul>
            //我是數據
      </ul>
      <!-- 重復ul內容 -->
</div>

  <script src="https://cdn.bootcdn.net/ajax/libs/es6-promise/4.2.8/es6-promise.auto.min.js"></script>
  <script src="./node_modules/jspdf/dist/jspdf.min.js"></script>
  <script src="./node_modules/html2canvas/dist/html2canvas.js"></script>
  <script src="./node_modules/html2pdf.js/dist/html2pdf.js"></script>

  <script>
  //文檔地址：https://ekoopmans.github.io/html2pdf.js/    
  var downpdfEle = document.querySelector('#downpdf');

    downpdfEle.onclick = function () {
      //超出canvas限度打印
      var pages = document.querySelector('#divEle').children;
      exportHTMLToPDF(pages,'模板')
      //正常打印
      //htmlToPdf('#divEle','模板')
    }

    //超出canvas限度打印函數
    function exportHTMLToPDF(pages,name) {
      const opt = {
        margin: [0, 0],
        filename: name+'.pdf',
        image: {
          type: 'jpeg',
          quality: 0.98
        },
        html2canvas: {
          dpi: 192,      
          scale:2,
          letterRendering: true
        },
        jsPDF: {
          unit: 'mm',
          format: 'a4',
          orientation: 'landscape'
        }
      };


      var worker = html2pdf()

      for (let i = 0; i < pages.length; i++) {
        console.log(pages[i]);
        worker = worker.set(opt).from(pages[i]).toContainer().toCanvas().toPdf().get('pdf').then((pdf) => {
          if (i < pages.length - 1) { // Bump cursor ahead to new page until on last page
            pdf.addPage();
          }
        });
      }
      worker.save();
    }


    //正常打印
   function htmlToPdf(el,name) {   //('#divEle',模板)
      let ele = document.querySelector(el);

      let opt = {
        margin: 1,
        filename:  name+'.pdf',
        image: {
          type: 'jpeg',
          quality: 0.98
        },
        html2canvas: {
          scale: 2,
          dpi: 92,
        },
        jsPDF: {
          unit: 'in',
          format: 'letter',
          orientation: 'portrait'
        }
      };
      html2pdf().set(opt).from(ele).save();
    }
  </script>