Vue3 通过Vue3-Print-Nb在线工单打印 模板打印 自定义打印 打印下载

介绍

通过在应用中集成打印功能，用户可以直接从页面打印工单，不用导出文件或使用其他外部工具。节省时间，提高效率，特别是当需要大量打印时。同时也可以将文件模板上传到数据库，提供给部门工作自行下载。
开源文档：https://www.npmjs.com/package/vue-print-nb

需求

需要对特定的区域进行打印，如果使用浏览器带的（ctrl+p）进行打印的话是全网页的，会将很多不需要的元素一起打印出这种非标准的打印方式更像是截图。而我的需求是将特定区域打印。通常情况下发表这些公告是在管理端。

依赖

npm install vue3-print-nb --save

引入

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   
}

文件结构

假如后端发回来的格式为富文本格式
A4标准尺寸：794*1122

  <div id="print" style="width: 794px; height: 1123px; border: 1px solid black; margin: 0 auto; padding: 20px;"><h1 style="text-align: center;">公告</h1><p style="font-size: 18px; text-align: center;">敬请各位注意：此为公司发布的最新公告，请大家认真阅读。</p><h2 style="font-size: 20px; margin-top: 40px;">公告内容：</h2><p style="font-size: 16px;">亲爱的同事们：<br><br>经过公司的调整和规划，近期我们将进行以下重要事项的更新：<br><br>1. 公司办公时间调整为每天早上9点至下午5点。<br>2. 员工福利增加，包括健康检查与年度体检等项目。<br>3. 公司将举办年度团建活动，具体安排将另行通知。<br><br>请各位同事按照新安排执行，并及时向管理层反馈任何问题。<br><br>感谢大家的理解与支持！<br><br>—— 公司管理团队</p></div>

局部打印

通过指令传递div标签上的id，调用浏览器的打印接口进行打印。

 <button v-print="'#print'">打印</button>

效果图

这样可以直接转为PDF或进行打印。