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

示例代码

全页面打印

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