vue3实现区域打印功能(vue3-print-nb)

原创

已于 2023-10-20 22:41:53 修改 · 1.3w 阅读

37 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #html #前端框架

于 2022-12-03 18:07:23 首次发布

本文介绍如何在Vue3项目中使用vue3-print-nb插件实现指定区域的打印功能。通过安装插件、配置参数和简单代码示例，帮助开发者轻松掌握这一技巧。

场景

大多数后台系统中都存在打印的需求，在有打印需求时，对前端来说当然是直接打印页面更容易，那么本篇文章就是在vue3中，使用vue3-print-nb插件来区域打印，实现指哪打哪！

一.安装vue3-print-nb

npm install vue3-print-nb

二.在main.ts中引入

//引入
import print from 'vue3-print-nb'
//挂载
const app = createApp(App)
app.use(print)

三.HTML

<!-- 打印区域容器 -->
<div id="printBox">
<span>我就是被打印的内容</span>
<span>在#printBox 容器里的内容都会被打印噢</span>
</div>

<!-- 按钮绑定打印 -->
<button v-print="print">点击打开打印预览</button>

四.参数配置

//这里是打印的配置项
const  print=ref({
        id: 'printBox',//这里的id就是上面我们的打印区域id，实现指哪打哪
        popTitle: '配置页眉标题', // 打印配置页上方的标题
        extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
        preview: false, // 是否启动预览模式，默认是false
        previewTitle: '预览的标题', // 打印预览的标题
        previewPrintBtnLabel: '预览结束，