使用print-js和html2canvas打印dom区域

发布于 16 天前 前端 最后更新于 14 天前

1、安装依赖

yarn add html2canvas print-js

2、页面使用

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

const element = document.querySelector("#box");

if (element) {
  // 使用 html2canvas 将 DOM 转换为图片
  html2canvas(element).then((canvas) => {
    const imgData = canvas.toDataURL("image/png");
    console.log(dayjs().format("YYYY-MM-DD HH:mm:ss"));
    createMessage.success("生成完成，请点击页面的打印");
    // 直接将图片传递给 print-js 打印
    print({
      printable: imgData,
      type: "image",
      base64: true, // 指定 base64 格式
    });
  });
}
 <div id="box">任意内容，比如文本，dom</div>