使用html2canvas和jsPdf實現打印功能

最近做項目中，🈶️遇到過實現模版打印功能，網上也找到很多資料可以實現，有的方式可以實現分頁，但是打印的A4紙上下不能留邊距，后來找到一個通過剪裁的方式可以實現左右上下留邊距，並且能實現分頁；

方法如下：基本思路是對獲得的canvas進行切割，按A4紙大小並留邊距后的比例進行剪裁，切出一頁一頁的內容來，再分別加到pdf中。

DEMO：此方法也可自定義打印的寬高

// 導出頁面為PDF格式
import html2canvas from "html2canvas"
import JSPDF from "jspdf"
export default {
  install(Vue, options) {
    /**
     * printId @String 打印區域id
     * isTemplateIframe @Boolean 打印區域是否是template
     * printW @Number 打印紙張寬
     * printH @Number 打印紙張高
     */
    Vue.prototype.ExportSavePdf = function(printId, isTemplateIframe, printW, printH) {
      return new Promise((resolve, reject) => {
        let dom;
        // let iframes;
        let templateIframeContent;
        if (isTemplateIframe) {
          document.getElementById(printId).contentWindow.postMessage("getIframeContent", "*");
          window.addEventListener("message", (e) => {
            // eslint-disable-next-line no-prototype-builtins
            if (e.data.hasOwnProperty("templateIframe")) {
              const data = e.data["templateIframe"];
              const dataDOM = new DOMParser().parseFromString(data, "text/html");
              templateIframeContent = dataDOM.documentElement;
            }
          });
          setTimeout(() => {
            if (templateIframeContent) {
              // dom = document.getElementById(printId).contentWindow.document.querySelector(".flex-container");
              dom = templateIframeContent.querySelector(".flex-container");
              // iframes = document.getElementById(printId).contentWindow.document.getElementsByTagName("iframe");
              // print(dom, iframes);
              print(dom);
            }
          }, 1000)
        } else {
          dom = document.getElementById(printId);
          // iframes = document.getElementsByTagName("iframe");
          // print(dom, iframes);
          print(dom);
        }

        function print(dom) {
          const copyDom = dom.cloneNode(true);
          // const copyIframes = copyDom.querySelectorAll("iframe");

          /* if (iframes && iframes.length > 0) {
            for (let i = 0; i < iframes.length; i++) {
              const yushanInputComponent = iframes[i].closest(".YushanInputComponent");
              if (yushanInputComponent) {
                const currentIframe = iframes[i];
                const currentIframeContent = currentIframe.contentWindow.document.body;
                const pNode = copyIframes[i].parentNode; // 移除copyDom下的iframe
                pNode.removeChild(copyIframes[i]);
                pNode.appendChild(currentIframeContent);
                pNode.style.height = iframes[i].scrollHeight + "px";
                continue;
              }
              const iframeDom = iframes[i].contentWindow.document.querySelector(".flex-container");
              const copyIframeDom = iframeDom.cloneNode(true); // 復制iframe
              const copyIframeNode = copyIframes[i];
              const parentNode = copyIframeNode.parentNode;
              parentNode.removeChild(copyIframeNode); // 移除原有的iframe
              parentNode.appendChild(copyIframeDom);
              parentNode.style.height = iframeDom.scrollHeight + "px";
            }
          } */
          copyDom.style.height = "auto";
          document.body.appendChild(copyDom);
          html2canvas(copyDom, {
            logging: false,
            useCORS: true
          }).then(function(canvas) {
            // 判斷瀏覽器內核是否是IE
            if (!!window.ActiveXObject || "ActiveXObject" in window) {
              alert('截圖打印暫不支持IE內核瀏覽器，請更換火狐或谷歌chrome內核瀏覽器，360等雙核瀏覽器請切換至極速模式');
              return;
            }

            // var pdf = new JSPDF('p', 'mm', 'a4'); // A4紙，縱向
            var direction = 'p';// 默認縱向打印
            var size = 'a4'
            if (printW && printH) {
              size = [printW, printH];
              if (printW <= printH) {
                direction = 'p'
              } else {
                direction = 'l'
              }
            }
            var pdf = new JSPDF(direction, 'mm', size); // A4紙，縱向
            var ctx = canvas.getContext('2d');
            var a4w = printW ? (printW - 20) : 190;
            var a4h = printH ? (printH - 20) : 277; // A4大小，210mm x 297mm，四邊各保留10mm的邊距，顯示區域190x277
            var imgHeight = Math.floor(a4h * canvas.width / a4w); // 按A4顯示比例換算一頁圖像的像素高度
            var renderedHeight = 0;

            while (renderedHeight < canvas.height) {
              var page = document.createElement("canvas");
              page.width = canvas.width;
              page.height = Math.min(imgHeight, canvas.height - renderedHeight); // 可能內容不足一頁

              // 用getImageData剪裁指定區域，並畫到前面建立的canvas對象中
              page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight,
                canvas.height - renderedHeight)), 0, 0);
              pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, a4w * page.height /
                page.width)); // 添加圖像到頁面，保留10mm邊距

              renderedHeight += imgHeight;
              if (renderedHeight < canvas.height) {
                pdf.addPage();
              } // 若是后面還有內容，添加一個空頁
              page.remove();
            }
            const link = window.URL.createObjectURL(pdf.output('blob'));
            window.open(link);
            document.body.removeChild(copyDom);
            resolve();
          })
        }
      })
    }
  }
}

 

因為項目中打印的可能是iframe區域，也可以是當前窗口的body內，所以前面代碼中有一些對dom的操作，

核心代碼在后半部分；

效果如下：