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，我们可以轻松实现网页局部内容的打印，并且它提供了丰富的配置选项，灵活满足各种打印需求。希望今天的分享能对你有所帮助。