DOM打印以及转PDF的实现

将网页中的指定 DOM 在保持原来样式的情况下转换为 canvas，然后进行后续操作

打印

import html2canvas from "html2canvas";
import printJs from "print-js";

/**
 * 将dom原封不动的通过打印机打印出来。
 * @param {Object} dom
 * @return {Promise}
 */
export function printHtml(dom) {
  return new Promise((resolve, reject) => {
    html2canvas(dom, {
      allowTaint: true,
      scrollY: 0,
      scrollX: 0,
      useCORS: true,
      width: dom.offsetWidth,
      height: dom.offsetHeight,
    })
      .then((canvas) => {
        let imgBase64 = canvas.toDataURL("image/png");

        printJs({
          printable: imgBase64,
          type: "image",
          style:
            "@media print { @page {size: auto; margin: 0; } body{margin:0 5px}}", //去除页眉页脚，size设置打印尺寸,
          onError: (err) => {
            reject(err);
          },
          onLoadingStart: () => {
            resolve({
              canvas,
              imgBase64,
            });
          },
        });
      })
      .catch((err) => {
        reject(err);
      });
  });
}

转 PDF

import html2canvas from "html2canvas";
import { jsPDF } from "jspdf";

/**
 * 将dom原封不动的转化为PDF文件
 * @param {Object} dom
 * @returns {Promise}
 */
export function html2Pdf(dom, title = "file") {
  return new Promise((resolve, reject) => {
    html2canvas(dom, {
      allowTaint: true,
      scrollY: 0,
      scrollX: 0,
      useCORS: true,
      width: dom.offsetWidth,
      height: dom.offsetHeight,
    })
      .then((canvas) => {
        // 根据宽度和高度那个更大来判断采用水平还是竖直排版
        let widthHeightDiff = canvas.width - canvas.height;
        let orientation = widthHeightDiff > 0 ? "landscape" : "portrait";

        // 创建pdf对象
        let pdf = new jsPDF(orientation, "px", [canvas.width, canvas.height]);
        pdf.addImage(canvas, "png", 0, 0, canvas.width, canvas.height);
        pdf.save(title + ".pdf");
        resolve();
      })
      .catch((err) => {
        reject(err);
      });
  });
}

第三方库

html2canvas
jspdf
print-js

参考

前端生成 pdf，jspdf+html2Canvas 的使用(vue)