在前端开发中，打印功能是一个常见的需求，尤其是在生成报表、打印用户资料或者导出文档时，通常需要通过前端代码进行打印。Print.js 是一个非常流行的 JavaScript 库，它提供了简单而强大的打印功能，允许你灵活控制打印内容、样式以及自定义功能。
本篇文章将介绍如何在 Vue 项目中结合 Print.js 实现前端打印功能，并展示如何自定义字体大小、样式，甚至封装共享样式，达到灵活打印需求。
1. 安装 Print.js
首先，我们需要安装 Print.js 库。可以通过 npm 或者直接使用 CDN 链接来引入。
使用 npm 安装：
npm install print-js --save
使用 CDN 引入：
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
2. 在 Vue 中使用 Print.js
安装完成后，我们可以在 Vue 项目中使用 Print.js 来实现打印功能。这里我们将使用 Print.js 来打印一个包含自定义样式的页面。
示例：基本打印功能
<template>
<div>
<button @click="printDocument">打印文档</button>
<div id="printArea">
<h1>打印示例</h1>
<p>这是一个使用 Print.js 打印的示例。</p>
<p>你可以自定义样式和字体大小。</p>
</div>
</div>
</template>
<script>
import printJS from 'print-js';
export default {
methods: {
printDocument() {
printJS({
printable: 'printArea', // 打印的元素id
type: 'html', // 打印类型为 HTML
style: `
#printArea {
font-family: Arial, sans-serif;
font-size: 18px;
}
h1 {
color: #3498db;
font-size: 24px;
}
p {
color: #2c3e50;
}
` // 自定义样式
});
}
}
};
</script>
解释：
printJS：调用Print.js的方法来启动打印。printable：指定需要打印的元素的 ID（此处为#printArea）。type：指定打印类型，这里选择html，即打印 HTML 元素。style：通过内联样式来自定义打印页面的样式，包括字体、颜色、大小等。
点击“打印文档”按钮后，打印机将根据提供的样式打印出该文档。
3. 自定义字体大小和样式
为了进一步控制打印内容，我们可以为不同的元素设置自定义的字体大小、颜色等样式。例如，在打印文档时，我们希望标题和段落的字体大小不同，且拥有不同的颜色。
示例：自定义字体大小和样式
<template>
<div>
<button @click="printDocument">打印文档</button>
<div id="printArea">
<h1>自定义字体大小和样式</h1>
<p>这段文字的字体大小为 16px，颜色为灰色。</p>
<p>标题的字体大小为 24px，颜色为蓝色。</p>
</div>
</div>
</template>
<script>
import printJS from 'print-js';
export default {
methods: {
printDocument() {
printJS({
printable: 'printArea',
type: 'html',
style: `
#printArea {
font-family: 'Helvetica', sans-serif;
font-size: 14px;
color: #333;
}
h1 {
font-size: 24px;
color: #3498db;
}
p {
font-size: 16px;
color: #7f8c8d;
}
`
});
}
}
};
</script>
解释：
h1标签的字体大小设置为 24px，颜色设置为蓝色。p标签的字体大小设置为 16px，颜色设置为灰色。
通过这样的自定义样式，我们可以灵活地调整每个元素的样式，使其在打印时符合需求。
4. 封装共享样式
如果你希望多个页面共享一组样式（例如，所有打印页面都使用相同的字体和样式），可以将样式提取成一个共享的 CSS 文件，或者在 Print.js 配置中使用外部样式表。这样做不仅能提高代码的复用性，还能确保样式的一致性。
示例：封装共享样式
1. 创建一个共享的样式文件 print-style.css
/* print-style.css */
.print-header {
font-size: 24px;
color: #3498db;
}
.print-body {
font-size: 16px;
color: #7f8c8d;
}
.print-footer {
font-size: 12px;
color: #bdc3c7;
}
2. 在 Vue 组件中引入该样式
<template>
<div>
<button @click="printDocument">打印文档</button>
<div id="printArea">
<h1 class="print-header">共享样式打印</h1>
<p class="print-body">这是共享样式的打印示例。</p>
<footer class="print-footer">打印自定义页脚</footer>
</div>
</div>
</template>
<script>
import printJS from 'print-js';
import './print-style.css'; // 引入共享样式
export default {
methods: {
printDocument() {
printJS({
printable: 'printArea',
type: 'html',
style: `
@import url('print-style.css');
`
});
}
}
};
</script>
解释：
- 我们将样式提取到一个外部文件
print-style.css中，并在 Vue 组件中引入。 printJS配置中通过@import引入该共享样式，确保打印时使用统一的样式。
5. 总结
本文介绍了如何在 Vue 项目中使用 Print.js 来实现前端打印功能。通过以下几个方面的实践，你可以灵活地控制打印内容：
- 基础打印功能：简单的打印元素。
- 自定义字体大小和样式：为不同元素设置自定义样式，控制字体、颜色和其他样式。
- 封装共享样式：通过外部 CSS 文件或
Print.js的样式配置，实现多个打印页面的样式共享。
通过这些技巧，你可以让前端打印功能更加灵活和个性化，满足不同场景下的需求。