使用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的操作，

核心代码在后半部分；

效果如下：