Vue3 借助 print.js 实现网页的局部打印
上个月在写公司项目时，遇到了一个页面局部打印的需求。起初是使用 html2canvas 和 jspdf 来实现，这些库可以将 HTML 元素转换为 Canvas，再将 Canvas 转化为 PDF，从而实现局部打印。但今天我们将重点介绍另一种方案 —— 使用 print.js 实现局部打印。
一、安装 print.js
首先，在 Vue 项目中安装 print.js 依赖：
npm install print-js --save
安装完成后，可以在 package.json 中看到该依赖。
二、引入 print.js
在需要使用 print.js 的地方进行引入：
import printJS from 'print-js';
三、编写 HTML 结构
我们编写一些 HTML 元素，并给需要打印的部分添加 id，表示该区域内的所有内容将被打印：
<template>
<div>
<div id="print-section">
<h1>这是一个需要打印的部分</h1>
<p>这里是一些打印内容的示例。</p>
</div>
<button @click="handlePrint">打印</button>
</div>
</template>
<script>
import { defineComponent } from 'vue';
import printJS from 'print-js';
export default defineComponent({
setup() {
const handlePrint = () => {
printJS({
printable: 'print-section',
type: 'html',
scanStyles: true,
style: 'h1 { color: blue; }',
});
};
return {
handlePrint,
};
},
});
</script>
在上面的代码中，我们将要打印的区域通过 id="print-section" 标识，并在点击按钮时调用 printJS() 方法来进行打印。
四、配置项
print.js 提供了丰富的配置选项来控制打印效果。常见的配置项如下：
printable: 需要打印的元素id或数据。type: 打印内容的类型（html,json,image,pdf等）。css: 外部样式文件，可以传递多个 CSS 文件的路径。style: 内联样式，直接作用于打印内容。scanStyles: 是否扫描页面中已有的样式，默认true。targetStyle: 打印时要包含的特定样式属性。ignoreElements: 忽略打印时不需要的元素，传入这些元素的id。showModal: 打印过程中是否显示加载模态框，默认false。
更多详细配置可以参考 print.js 文档。
五、打印效果
当我们在页面中点击 "打印" 按钮时，会调用 printJS()，并将我们指定的 HTML 元素进行局部打印。通过配置项，还可以轻松地自定义打印样式和内容。
六、总结
通过 print.js，我们可以轻松实现网页局部内容的打印，并且它提供了丰富的配置选项，灵活满足各种打印需求。希望今天的分享能对你有所帮助。