jQuery -jsPDF - html匯出PDF - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

jQuery -jsPDF - html匯出PDF

canvas 匯出pdf jquery

圓頭人 2022-03-24 14:02:24 ‧ 2300 瀏覽

分享至

step
1.import script.js
2.add export_content <div id="export_content"></div>
3.add button : exportToPdf <button id="exportToPdf">匯出PDF</button>
4.add script function

目前問題:如果換頁,文字有可能被切成一半.一半在頁1,一半在頁2

<head>

          <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
          <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
          <script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>

              
          <script type="text/javascript">
              window.onload = function () {
                  var downPdf = document.getElementById("exportToPdf");
                  downPdf.onclick = function () {
                      html2canvas(
                              document.getElementById("export_content"),
                              {
                                  dpi: 172,//匯出pdf清晰度
                                  onrendered: function (canvas) {
                                      var contentWidth = canvas.width;
                                      var contentHeight = canvas.height;

                                      //一頁pdf顯示html頁面生成的canvas高度;
                                      var pageHeight = contentWidth / 592.28 * 841.89;
                                      //未生成pdf的html頁面高度
                                      var leftHeight = contentHeight;
                                      //pdf頁面偏移
                                      var position = 0;
                                      //html頁面生成的canvas在pdf中圖片的寬高（a4紙的尺寸[595.28,841.89]）
                                      var imgWidth = 595.28;
                                      var imgHeight = 592.28 / contentWidth * contentHeight;

                                      var pageData = canvas.toDataURL('image/jpeg', 1.0);
                                      var pdf = new jsPDF('', 'pt', 'a4');

                                      //有兩個高度需要區分，一個是html頁面的實際高度，和生成pdf的頁面高度(841.89)
                                      //當內容未超過pdf一頁顯示的範圍，無需分頁
                                      if (leftHeight < pageHeight) {
                                          pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
                                      } else {
                                          while (leftHeight > 0) {
                                              pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                                              leftHeight -= pageHeight;
                                              position -= 841.89;
                                              //避免新增空白頁
                                              if (leftHeight > 0) {
                                                  pdf.addPage();
                                              }
                                          }
                                      }
                                      pdf.save('content.pdf');
                                  },
                                  //背景設為白色（預設為黑色）
                                  background: "#fff"
                              })
                  }
              }
          </script>
</head>

ref
https://www.itread01.com/content/1543721531.html

https://www.twblogs.net/a/5cfebb73bd9eee14644ef250