vue-print-nb 实现页面打印（含分页打印）

Web 实现页面打印

安装

官网地址：https://github.com/Power-kxLee/vue3-print-nb

// 安装 打印组件
npm install vue-print-nb --save

引用

• vue2引用import Print from'vue-print-nb'// 全局引用Vue.use(Print);// 或者// 单组件引用import print from'vue-print-nb'// 在自定义指令中注册directives:{ print }
• vue3引用- // 全局引用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 }

API

属性类型默认值必要可选值描述idString-是-范围打印 ID（如果设置url则可以不设置id）urlString-否-打印指定的 URL。（不允许同时设置IDpopTitleString-否-默认使用浏览器标签名，为空时为undefinedstandardStringHTML5否html5，loose，strict打印的文档类型extraHeadString-否-在节点中添加 DOM 节点， 并用,(Print local range only)分隔多个节点extraCssString-否-新的 CSS 样式表， 并使用,（仅打印本地范围）分隔多个节点openCallbackFunction-否-调用打印工具成功回调函数closeCallbackFunction-否-关闭打印工具成功回调函数beforeOpenCallbackFunction-否-调用打印工具前的回调函数previewBooleanfalse否true,false预览工具previewTitleString-否-‘打印预览’previewPrintBtnLabelString打印否-打印按钮名称previewBeforeOpenCallbackFunction-否-预览打开前回调函数previewOpenCallbackFunction-否-预览打开回调函数clickMountedFunction-否-点击打印按钮回调函数

示例代码

1. 全页面打印<button v-print>打印整个页面</button>
2. 局部打印（Tip：被打印的区域需要被渲染出来并且不能被隐藏才可以打印）<template> <div> <button v-print="printOption">NB打印</button> <div id="nbprint"> <table> <tr> <th>序号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>手机</th> <th>邮箱</th> <th>地址</th> <th>工龄</th> <th>岗位</th> <th>薪资</th> </tr> <tr v-for="(item, index) in list" key="index"> <td>{{ index + 1}}</td> <td>{{ item.name }}</td> <td>{{ item.age }}</td> <td>{{ item.sex }}</td> <td>{{ item.phone }}</td> <td>{{ item.mail }}</td> <td>{{ item.address }}</td> <td>{{ item.workAge }}</td> <td>{{ item.jobs }}</td> <td>{{ item.salary }}</td> </tr> </table> </div> </div></template><script> export default { name: "nb-print", data() { return { printOption: { id: 'nbprint', // 打印元素的id 不需要携带#号 popTitle: '员工信息' // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言 }, list: [{ name: "阿哒", age: 26, sex: "男", phone: "12345678901", mail: "[email protected]", address: "蓝星星国马尔哈哈海岛", workAge: 2, jobs: "研发", salary: "1.8k" }, { name: "阿荣", age: 24, sex: "男", phone: "12345678901", mail: "[email protected]", address: "蓝星星国马尔哈哈海岛", workAge: 1, jobs: "研发", salary: "1.8k" }, { name: "阿豪", age: 26, sex: "男", phone: "12345678901", mail: "[email protected]", address: "蓝星星国马尔哈哈海岛", workAge: 5, jobs: "产品", salary: "1.8k" }, { name: "阿晨", age: 29, sex: "男", phone: "12345678901", mail: "[email protected]", address: "蓝星星国马尔哈哈海岛", workAge: 9, jobs: "设计", salary: "1.8k" }, { name: "阿震", age: 30, sex: "男", phone: "12345678901", mail: "[email protected]", address: "蓝星星国马尔哈哈海岛", workAge: 7, jobs: "销售", salary: "1.8k" }, { name: "阿锋", age: 21, sex: "男", phone: "12345678901", mail: "[email protected]", address: "蓝星星国马尔哈哈海岛", workAge: 0.1, jobs: "售后", salary: "1.8k" } ] } } }</script>
3. 打印预览<script> export default { name: "nb-print", data() { return { printOption: { id: 'nbprint', // 打印元素的id 不需要携带#号 preview: true, // 开启打印预览 previewTitle: '打印预览', // 打印预览标题 popTitle: '员工信息', // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言 // 头部文字 默认空 在节点中添加 DOM 节点， 并用,(Print local range only)分隔多个节点 extraHead:'https://***/***.css, https://***/***.css', // 新的 CSS 样式表， 并使用,（仅打印本地范围）分隔多个节点 extraCss: '<meta http-equiv="Content-Language"content="zh-cn"/>', previewBeforeOpenCallback: () => { console.log("触发打印预览打开前回调"); }, previewOpenCallback: () => { console.log("触发打开打印预览回调"); }, beforeOpenCallback: () => { console.log("触发打印工具打开前回调"); }, openCallback: () => { console.log("触发打开打印工具回调"); }, closeCallback: () => { console.log("触发关闭打印工具回调"); }, clickMounted: () => { console.log("触发点击打印回调"); } } } } }</script>
4. 分页打印<template> <div> <button v-print="'#nbprint'">NB打印</button> <div id="nbprint"> // 方法一 // 使用div包裹需要分页的块 使用 css属性 page-break-after:always进行分页 <div style="page-break-after:always">这是第二页</div> <div style="page-break-after:always">这是第二页</div> </div> </div></template><style> // 方法二 // 使用媒体查询 在打印时设置 body 和 html 的高度为auto @media print { @page { size: auto; } body, html { height: auto !important; } }</style>