pc端 打印

1.安装依赖

npm install vue-print-nb --save

2.在main.js中引入

import Print from 'vue-print-nb'
Vue.use(Print)

3.添加事件按钮

<el-button v-print=“printObj” @click=“printClk” >打印

4.给打印区域添加id

5.data中定义

printObj: {
id: “printId”,
popTitle: ‘打印’, // 上方标题
extraHead: ‘’, //标题下面文字，具体使用见下
preview: ‘’, // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
previewTitle: ‘’, // 打印预览的标题（开启预览模式后出现）,
previewPrintBtnLabel: ‘’, // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
zIndex: ‘’, // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）
previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
beforeOpenCallback() {}, // 开启打印前的回调事件
openCallback() {}, // 调用打印之后的回调事件
beforeEntryIframe() {
const cells = document.querySelectorAll(‘.cell’)
;[].slice.call(cells).forEach(item => {
// 为了让表格中的内容自动换行，不需要的话可以删掉
item.style.whiteSpace = ‘pre-wrap’
})
},
closeCallback(e) {//关闭打印的回调事件（无法确定点击的是确认还是取消）
// 控制高度
e.$refs.tables.$el.style.height = ‘calc(100vh - 150px)’
e.$refs.tb.$el.style.height = ‘calc(100vh - 150px)’
}
},

6.按钮点击事件

printClk() {
可以写点击按钮后需要的操作
},

7.添加头部内容

this.printObj.popTitle = “xxx(” + this.xxx + “)”
this.printObj.extraHead = “

xxx： xxx：

”
8.样式修改
在全局样式中，新增标签，里面是打印时生效的样式