安装依赖:npm install vue-print-nb --save
在main.js中写入
import Print from 'vue-print-nb'
Vue.use(Print);
要打印的区域加上id
<div id="prinst" style="width:100%;"></div>
<div v-print="printObj">打印</div>
在data中
data() {
return {
dialogVisible: false,
checkList: ['复选框 A'],
printObj: {
id: "printMe", // 这里是要打印元素的ID
popTitle: ' ', // 打印的标题
extraCss: '', // 打印可引入外部的一个 css 文件
extraHead: '', // 打印头部文字
},
};
},
剩下的就说写表的样式
如果遇到请求头有标题为Undefined或者尾部有当前地址可以在css中加入
@page {
size: auto;
margin: 6mm 10mm 6mm 10mm;
}
html {
background-color: #FFFFFF;
margin: 0;
}
body {
border: solid 1px blue;
margin: 10mm 15mm 10mm 15mm;
}