Vue3借助print.js实现网页的局部打印

引言

在开发公司项目时，可能会遇到页面局部打印的需求。之前我们讨论过使用 html2canvas 和 jspdf 实现这一功能的方法，但今天我们将介绍一种更简单的方案：使用 print.js 来实现局部打印。

安装print.js

首先，在Vue项目中安装 print.js 依赖：

npm install print-js --save

安装完成后，可以在项目的 package.json 文件中看到 print-js 的依赖信息。

在项目中引入print.js

在使用 print.js 的组件或页面中进行引入：

import printJS from 'print-js';

编写HTML元素

我们先编写一些需要打印的HTML元素。假设我们有一个需要打印的部分，给它绑定一个 id，以表示需要打印该元素及其所有子元素。

示例HTML

<template>
  <div>
    <div id="printableArea">
      <h1>这是一个需要打印的部分</h1>
      <p>此段内容将被打印。</p>
      <!-- 其他内容 -->
    </div>
    <button @click="printContent">打印内容</button>
  </div>
</template>

实现打印功能

接下来，为按钮绑定一个事件，在事件中调用 print.js 并传入相关的配置项。

示例方法

<script>
import printJS from 'print-js';

export default {
  methods: {
    printContent() {
      printJS({
        printable: 'printableArea',  // 需要打印的元素id
        type: 'html',  // 打印内容的类型，这里使用HTML
        scanStyles: true,  // 是否扫描并应用页面上的样式
        css: 'https://path-to-your-css-file.css'  // 可选项：引入外部CSS文件
      });
    }
  }
};
</script>

页面呈现与打印效果

编写完成后，点击按钮即可触发打印效果。print.js 会根据传入的配置打印指定的HTML内容。页面呈现如下：

其他配置选项

print.js 还支持传入很多配置项以自定义打印效果，包括但不限于：

• css：指定打印时引入的CSS文件路径。
• style：定义要在打印时应用的内联样式。
• scanStyles：是否扫描并应用页面上的所有样式。
• targetStyle、targetStyles：指定特定样式的打印方式。
• ignoreElements：忽略特定元素的打印。
• properties：用于打印JSON数据时定义属性。
• repeatTableHeader：在每一页重复表格的表头。
• showModal：在打印之前是否显示加载模态框。

总结

通过 print.js，我们可以轻松实现网页的局部打印功能。该插件提供了丰富的配置选项，能够满足各种打印需求。希望这篇文章能帮助你更好地掌握Vue项目中的局部打印实现。