我坚信很多朋友在开发后台管理类项目的过程中，大概率都会碰到打印的需求！
倘若您目前还未遭遇这样的需求，也无妨，今日看完，以便日后之需。
今天为大家分享一个超牛的 Vue 打印组件 — vue-print-nb
它是一个针对 Vue.js 的指令包装器，用于达成页面打印功能📄。具备简单、快捷、便利、轻量等出色优点👍。
安装与引入
1. 安装
- • Vue 2 版本：
npm install vue-print-nb --save - • Vue 3 版本：
npm install vue3-print-nb --save
2. 引入（以下是两种常见的引入方式）
Vue 2 版本
- • 全局指令：在
main.js中添加：
import print from 'vue-print-nb'; Vue.use(print);
- • 局部指令：在单业务页面添加：
import print from 'vue-print-nb'; directives: { print }
Vue 3 版本
- • 全局指令：
import { createApp } from 'vue'; import App from './App.vue'; import print from 'vue3-print-nb'; const app = createApp(App); app.use(print); app.mount('#app');
- • 局部指令：
import print from 'vue3-print-nb'; directives: { print }
使用方法
1. 打印整个页面
只需添加：
<button v-print>打印整个页面</button>
2. 打印局部范围
- • HTML 部分：
<div id="print-me" style="background: red;"> <!-- 这里是你要打印的内容 --> </div> <button v-print="'#print-me'">打印局部范围</button>
- • 直接传入字符串类型的 ID：id 为局部打印范围的标识符。
3. 打印局部范围更多设置（通过对象进行配置）
- • JavaScript 部分：
export default { data() { return { printLoading: true, printobj: { id: "print-me", popTitle: '好的打印标题', extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css", extraHead: '<meta http-equiv="content-language" content="zh-cn" />', beforeOpenCallback(vue) { vue.printLoading = true; console.log('打开之前'); }, openCallback(vue) { vue.printLoading = false; console.log('执行了打印'); } } }; } };
- • HTML 部分：
<button v-print="printobj">打印局部范围</button> <div id="loading" v-show="printLoading"></div> <div id="print-me" style="background: red;"> <!-- 这里是你要打印的内容 --> </div>
4. 打印 URL
- • 直接使用：
<button v-print="url">打印 URL</button>
- • 异步加载 URL：
asyncUrl(resolve) { setTimeout(() => { resolve('http://localhost:8080/'); }, 2000); }
5. 打印预览
- • 全局预览：
<button v-print="printobj">打印预览</button>
其中 printobj 对象中包含预览相关的配置，如 preview: true, previewTitle: '预览的标题', previewPrintBtnLabel: '预览结束，开始打印' 等。
- • 局部预览：
<button v-print="printLocalRangePreviewObj">打印局部范围预览</button>
6. v-print API
- • Vue 2 版本：在全局或局部引入后，即可在组件中使用
v-print指令。 - • Vue 3 版本：与 Vue 2 类似，在相应的引入方式后，可在组件中使用
v-print指令。
注意事项和解决方法
在使用 vue-print-nb 的过程中，可能会遇到一些小问题，但别担心，我们有办法解决😜！
1. 页眉页脚字符串问题🚩
打印预览时可能会出现页码、网址等 undefined 之类的字符。可以通过设置样式来解决，优点是简单直接，缺点是页面上下边距会消失。可以在打印媒体查询中添加如下样式，将页边距设置为 3mm 来隐藏页眉页脚：
@media print { @page { size: auto; margin: 3mm; } }
2. 打印时内容显示不全问题🚩
如果实际页面中高度不够导致部分内容隐藏，可以在打印媒体查询中添加如下样式，将 body 的高度设置为 auto，使隐藏滚动的内容全部显示：
@media print { @page { size: auto; margin: 3mm; } body { height: auto; } }
3. 打印时样式消失问题🚩
样式消失的根本原因是打印内容外层的样式以及使用的一些框架样式没有被获取到。如果确定需要打印的内容，尽量避免在表格或块内容中使用任何 UI 框架以及外部的 scss 或 less 内容。可以采用内联样式或在内部样式中书写样式。例如：
<div class="box"> <div id="printtest"> <div class="print-style">打印的相关内容</div> </div> </div> <style lang="scss" scoped> .box {} // 无效 #printtest {} // 无效 .print-style {} // 写在这里的样式才有效果 </style>
4. 打印时需要根据内容分页及添加水印🚩
如果有多个表格或内容块需要分页，可以通过计算进行分页，并为每一页添加水印。例如：
<div id="printtest"> <div class="printpage printmark" v-for="item in 5" :key="item"> 打印的相关内容 </div> </div> <style media="print" lang="scss"> @media print { @page { size: auto; margin: 3mm; } body { height: auto; } .printpage { height: 291mm; // 根据实际情况进行分页设置 position: relative; &::before { position: absolute; content: 'xx 水印'; top: 20%; right: 5%; font-size: 48px; opacity: 0.1; transform: rotate(30deg); } &::after { position: absolute; content: 'xx 水印'; bottom: 20%; left: 5%; font-size: 48px; opacity: 0.1; transform: rotate(30deg); } } } </style>
总结
总的来说，vue-print-nb 是一个非常实用的 Vue 打印组件👍，它让页面打印变得简单而高效！
无论是打印整个页面，还是特定的局部范围，甚至是 URL，都能轻松搞定🤩！如果你正在开发 Vue 项目，并且有打印的需求，不妨试试这个组件吧😉！
