Web 实现页面打印

安装

官网地址：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>