vue-print-nb页面打印
Fankyt 人气:0Web 实现页面打印
安装
官网地址: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
属性 | 类型 | 默认值 | 必要 | 可选值 | 描述 |
---|---|---|---|---|---|
id | String | - | 是 | - | 范围打印 ID(如果设置url则可以不设置id) |
url | String | - | 否 | - | 打印指定的 URL。(不允许同时设置ID |
popTitle | String | - | 否 | - | 默认使用浏览器标签名,为空时为undefined |
standard | String | HTML5 | 否 | html5,loose,strict | 打印的文档类型 |
extraHead | String | - | 否 | - | 在节点中添加 DOM 节点, 并用,(Print local range only)分隔多个节点 |
extraCss | String | - | 否 | - | 新的 CSS 样式表, 并使用,(仅打印本地范围)分隔多个节点 |
openCallback | Function | - | 否 | - | 调用打印工具成功回调函数 |
closeCallback | Function | - | 否 | - | 关闭打印工具成功回调函数 |
beforeOpenCallback | Function | - | 否 | - | 调用打印工具前的回调函数 |
preview | Boolean | false | 否 | true,false | 预览工具 |
previewTitle | String | - | 否 | - | ‘打印预览’ |
previewPrintBtnLabel | String | 打印 | 否 | - | 打印按钮名称 |
previewBeforeOpenCallback | Function | - | 否 | - | 预览打开前回调函数 |
previewOpenCallback | Function | - | 否 | - | 预览打开回调函数 |
clickMounted | Function | - | 否 | - | 点击打印按钮回调函数 |
示例代码
全页面打印
<button v-print>打印整个页面</button>
局部打印(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: "mmm@mmm.com", address: "蓝星星国马尔哈哈海岛", workAge: 2, jobs: "研发", salary: "1.8k" }, { name: "阿荣", age: 24, sex: "男", phone: "12345678901", mail: "mmm@mmm.com", address: "蓝星星国马尔哈哈海岛", workAge: 1, jobs: "研发", salary: "1.8k" }, { name: "阿豪", age: 26, sex: "男", phone: "12345678901", mail: "mmm@mmm.com", address: "蓝星星国马尔哈哈海岛", workAge: 5, jobs: "产品", salary: "1.8k" }, { name: "阿晨", age: 29, sex: "男", phone: "12345678901", mail: "mmm@mmm.com", address: "蓝星星国马尔哈哈海岛", workAge: 9, jobs: "设计", salary: "1.8k" }, { name: "阿震", age: 30, sex: "男", phone: "12345678901", mail: "mmm@mmm.com", address: "蓝星星国马尔哈哈海岛", workAge: 7, jobs: "销售", salary: "1.8k" }, { name: "阿锋", age: 21, sex: "男", phone: "12345678901", mail: "mmm@mmm.com", address: "蓝星星国马尔哈哈海岛", workAge: 0.1, jobs: "售后", salary: "1.8k" } ] } } } </script>
打印预览
<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>
分页打印
<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>
补充:vue-print-nb插件的一些优化
1.去掉页眉页脚
<style> @page { size: auto; margin: 0mm; } </style>
2.打印內容不自动换行问题
只需要给不自动换行的标签加上 word-wrap:break-word; 即可。
<style> .procedure{ word-wrap:break-word; } </style>
总结
加载全部内容