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

示例代码

1. 全页面打印

   <button v-print>打印整个页面</button>
   

2. 局部打印（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>
   

3. 打印预览

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

4. 分页打印

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