---

前言

解决前端多页打印并自动分页需求

---

一、引入方式

请参照我上一篇博客，有详细说明如何安装依赖，如何使用， 本文只展示多页打印并自动分页核心代码。

【利用printJS + html2canvas实现页面打印的解决方案（解决第一页空白问题）】

二、核心代码

代码如下（示例）：

<!-- 批量打印 -->
<el-button plain @click="printArticle">打印</el-button>

const batchPrint = async () => {
  // loading
  let loadingInstance = Loading.service({ text: "" });

  let imgs = [];
  const setup = {
    useCORS: true, // 允许跨域
    dpi: 300,
    scale: 2,// 提高图片质量
  };

  // 创建任务队列
  const requsetList = [];
  // 创此处将各自业务中需要打印的文章批量转为图片
  state.value.list.forEach((item, index) => {
    let articleWrapDom = document.getElementById(
      state.value.containerId + index
    );
    requsetList.push(
      window.html2canvas(articleWrapDom, setup).then((canvas) => {
        const url = canvas.toDataURL("image/jpeg", 1.0);
        imgs.push(url);
      })
    );
  });

  await Promise.all(requsetList);

  // 关闭loading
  loadingInstance.close();

  if (imgs.length == state.value.list.length && imgs.length > 0) {
    if (window?.printJS) {
      window.printJS({
        printable: imgs,
        type: "image",
        style:
          "@media print{ @page{size:auto;margin:1.5cm 1cm 1.5cm 1cm} body{ margin:0px  } img {display: block; margin: 0px; page-break-after: always;}}",// 解决多页打印自动分页
      });
    }
  }
};

---

总结

以上就是利用printJS和html2canvas，解决前端多页打印并自动分页需求，可以在前端实现高质量的页面打印功能。通过合理配置这两个库，可以处理跨域问题、提高图片质量、自定义打印样式以及实现分页处理。这种方案不仅简单易用，而且不占用后端资源，适用于各种Web应用的打印需求。

希望本文对你有所帮助，如果你有任何问题或建议，请随时留言交流。