在项目中,有时需要打印页面的表格,在网上找了一个打印组件vue-print-nb,用了还不错,所以下面这篇文章主要给大家介绍了关于vue-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
| 属性 | 类型 | 默认值 | 必要 | 可选值 | 描述 |
|---|
| 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>
<button v-print="printOption">NB打印</button>
<div id="nbprint">
<table>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>手机</th>
<th>邮箱</th>
<th>地址</th>
<th>工龄</th>
<th>岗位</th>
<th>薪资</th>
<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>
</table>
</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>
<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>
</template>
<style>
// 方法二
// 使用媒体查询 在打印时设置 body 和 html 的高度为auto
@media print {
@page {
size: auto;
body, html {
height: auto !important;
</style>
补充：vue-print-nb插件的一些优化
1.去掉页眉页脚
<style>
@page {
size: auto;
margin: 0mm;
</style>
2.打印內容不自动换行问题
只需要给不自动换行的标签加上 word-wrap:break-word; 即可。
