位置: IT常识 - 正文

vue-print-nb 实现页面打印（含分页打印）(vue print nb 教程)

编辑：rootadmin

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

推荐整理分享vue-print-nb 实现页面打印（含分页打印）(vue print nb 教程)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue实现打印功能的两种方法,vue-print-nb说明,vue-print-nb-jeecg,vue-print-nb ie,vue-easy-print,vue-print-nb遇到的坑,vue-print-nb ie,vue-print-nb说明,内容如对您有帮助，希望把文章链接给更多的朋友！

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

// 安装打印组件npm install vue-print-nb --save引用 vue-print-nb 实现页面打印（含分页打印）(vue print nb 教程)

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-否-点击打印按钮回调函数示例代码

全页面打印

<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>

打印预览

分页打印

<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>