Web 实现页面打印
安装
官网地址： https://github测试数据/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测试数据",
address: "蓝星星国马尔哈哈海岛",
workAge: 2,
jobs: "研发",
salary: "1.8k"
},
{
name: "阿荣",
age: 24,
sex: "男",
phone: "12345678901",
mail: "mmm@mmm测试数据",
address: "蓝星星国马尔哈哈海岛",
workAge: 1,
jobs: "研发",
salary: "1.8k"
},
{
name: "阿豪",
age: 26,
sex: "男",
phone: "12345678901",
mail: "mmm@mmm测试数据",
address: "蓝星星国马尔哈哈海岛",
workAge: 5,
jobs: "产品",
salary: "1.8k"
},
{
name: "阿晨",
age: 29,
sex: "男",
phone: "12345678901",
mail: "mmm@mmm测试数据",
address: "蓝星星国马尔哈哈海岛",
workAge: 9,
jobs: "设计",
salary: "1.8k"
},
{
name: "阿震",
age: 30,
sex: "男",
phone: "12345678901",
mail: "mmm@mmm测试数据",
address: "蓝星星国马尔哈哈海岛",
workAge: 7,
jobs: "销售",
salary: "1.8k"
},
{
name: "阿锋",
age: 21,
sex: "男",
phone: "12345678901",
mail: "mmm@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>
补充：vue-print-nb插件的一些优化
1.去掉页眉页脚
<style>
@page {
size: auto;
margin: 0mm;
}
</style>
2.打印內容不自动换行问题
只需要给不自动换行的标签加上 word-wrap:break-word; 即可。
<style>
.procedure{
word-wrap:break-word;
}
</style>
总结
到此这篇关于vue-print-nb实现页面打印功能的文章就介绍到这了,更多相关vue-print-nb页面打印内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
查看更多关于vue-print-nb实现页面打印功能实例(含分页打印)的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did122074