Web 实现页面打印
安装
官网地址:
/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
示例代码
全页面打印
<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@",address: "蓝星星国马尔哈哈海岛",workAge: 2,jobs: "研发",salary: "1.8k"},{name: "阿荣",age: 24,sex: "男",phone: "12345678901",mail: "mmm@",address: "蓝星星国马尔哈哈海岛",workAge: 1,jobs: "研发",salary: "1.8k"},{name: "阿豪",age: 26,sex: "男",phone: "12345678901",mail: "mmm@",address: "蓝星星国马尔哈哈海岛",workAge: 5,jobs: "产品",salary: "1.8k"},{name: "阿晨",age: 29,sex: "男",phone: "12345678901",mail: "mmm@",address: "蓝星星国马尔哈哈海岛",workAge: 9,jobs: "设计",salary: "1.8k"},{name: "阿震",age: 30,sex: "男",phone: "12345678901",mail: "mmm@",address: "蓝星星国马尔哈哈海岛",workAge: 7,jobs: "销售",salary: "1.8k"},{name: "阿锋",age: 21,sex: "男",phone: "12345678901",mail: "mmm@",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>