Web 实现页面打印

安装

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

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

引用

vue2引用

importPrintfromvue-print-nb// 全局引用Vue.use(Print);// 或者// 单组件引用importprintfromvue-print-nb// 在自定义指令中注册directives:{print}

vue3引用

// 全局引用import{createApp}fromvueimportAppfrom./App.vueimportprintfromvue3-print-nbconstapp=createApp(App)app.use(print)app.mount(#app)// 或者// 单组件引用importprintfromvue3-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-否-点击打印按钮回调函数

示例代码

全页面打印

v-print>打印整个页面

局部打印（Tip：被打印的区域需要被渲染出来并且不能被隐藏才可以打印）

v-print="printOption">NB打印 id="nbprint"> v-for="(item, index) in list"key="index">序号姓名年龄性别手机邮箱地址工龄岗位薪资{{ index + 1}}{{ item.name }}{{ item.age }}{{ item.sex }}{{ item.phone }}{{ item.mail }}{{ item.address }}{{ item.workAge }}{{ item.jobs }}{{ item.salary }}

打印预览

分页打印

v-print="#nbprint">NB打印 id="nbprint">// 方法一// 使用div包裹需要分页的块 使用 css属性 page-break-after:always进行分页 style="page-break-after:always">这是第二页 style="page-break-after:always">这是第二页// 方法二// 使用媒体查询 在打印时设置 body 和 html 的高度为auto@mediaprint{@page{size:auto;}body,html{height:auto!important;}}