html2pdf.js 实现打印功能

一、基础使用

<script setup>
	import html2pdf from 'html2pdf.js';
import HelloWorld from './components/HelloWorld.vue'

const printFile = () => {
		const element = document.getElementById('report');
		const opt = {
			margin: 0.5,
			filename: `(报告).pdf`,
			pagebreak: { mode: 'avoid-all' },
			image: {
				type: 'jpeg',
				quality: 0.98
			},
			html2canvas: {
				scale: 1.5,
				useCORS: true
			},
			jsPDF: {
				compress: true,
			},
		};
		html2pdf()
			.from(element)
			.set(opt)
			.toPdf()
			.get('pdf')
			.save();
	}
</script>

<template>
  <button @click="printFile">打印</button>
  <div id="report" style="text-align: center;"> <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" /></div>
 
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

打印效果

二、固定字符在最底下

html2pdf()
    .from(element)
    .set(opt)
    .toPdf()
    .get("pdf")
    .then((pdf) => {
      //1、每一页都标注
      for (let index = 0; index <= pdf.internal.getNumberOfPages(); index++) {
        pdf.setPage(index);
        pdf.setFontSize(10); //字体大小
        pdf.setTextColor("#008000"); //字体颜色
        pdf.text(
          ["Guangdong jspdf."],//内容
          pdf.internal.pageSize.getWidth() / 2,
          pdf.internal.pageSize.getHeight() - 15, //在页面的位置
          { align: "center" }
        );
      }
      //2、在最后一页标注
      pdf.setPage(pdf.internal.getNumberOfPages());
      pdf.setPage(index);
      pdf.setFontSize(10); //字体大小
      pdf.setTextColor("#008000"); //字体颜色
      pdf.text(
        ["Guangdong jspdf."],
        pdf.internal.pageSize.getWidth() / 2,
        pdf.internal.pageSize.getHeight() - 15, //在页面的位置
        { align: "center" }
      );
    })
    .save();
};

打印效果

固定中文

中文字符会乱码，如果要显示中文字符的话需要引入打包好的中文字符文件。 按这篇文章(解决html导出pdf中文乱码问题的正确姿势 - chiikin - 博客园 (cnblogs.com))导出字体文件，可以在main.js引入，然后在opt里加上 pdf.setFont('在字体文件里的名字');

实现效果

三、分页

这个插件分页问题其实还蛮多的，不过基本能实现我的需求。主要是靠opt里pagebreak: { ... }这个属性实现，不加这个属性的话内容会直接被截断。

• pagebreak: { mode: "avoid-all" }：当剩下的页面不能容纳某个标签内容，这个标签的内容就会被移到下一页

• pagebreak: { before: '#page2el' }：在某个标签上加上id="page2el"，就能使从这个标签开始分页

• pagebreak: { after: '#page2el' }：在某个标签上加上id="page2el"，从这个标签内容后开始分页

四、总结

特殊点的用法我就用到这两种，还有打印时第一页是空白页，我的情况是用了pagebreak: { mode: "avoid-all" }这个属性，删除掉最外层那个标签就可以了。

五、参考

(GitHub - eKoopmans/html2pdf.js: Client-side HTML-to-PDF rendering using pure JS.)

(jsPDF - Documentation (parallax.github.io))