一、安装vue-print-nb
npm install vue-print-nb --save
二、使用
1、全局注册(main.js文件)
import Print from 'vue-print-nb'
Vue.use(Print);
2、局部注册(自定义指令)
import print from 'vue-print-nb'
directives: {
print
}
3、绑定到点击得按钮上
<div id="printTest">
要打印得区域
</div>
<el-button type="primary" v-print="printObj" >打印</el-button>
4、data中可对打印进行配置
data(){
return {
printObj: {
id: 'print',
popTitle: '打印', // 打印配置页上方标题
extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
previewBeforeOpenCallback: () => {}, //预览窗口打开之前的callback（开启预览模式调用）
previewOpenCallback: () => {}, // 预览窗口打开之后的callback（开启预览模式调用）
beforeOpenCallback: () => {}, // 开启打印前的回调事件
openCallback: () => {}, // 调用打印之后的回调事件
closeCallback: () => {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）
url: '',
standard: '',
extraCss: '',
},
}
}
三、问题
1、Q：el-table表格显示不全 A:css样式调整
<style media="print" lang="scss" scoped>
@page {
size: auto;
margin: 3mm;
}
@media print {
/deep/ table {
table-layout: auto !important;
}
/deep/ .el-table__header-wrapper .el-table__header {
width: 100% !important;
}
/deep/ .el-table__body-wrapper .el-table__body {
width: 100% !important;
}
/deep/ #print table {
table-layout: fixed !important;
}
}
</style>
2、以下样式修改原因：el-table中存在固定得列 导致打印样式错乱 注：同样需放在@media print下
/deep/.el-table__fixed {
display: none;
}
/deep/.el-table .el-table__cell.is-hidden > * {
// visibility: hidden;
visibility: visible;
font-size: 12px;
}
3、这里偷了个懒 打印时表格得边框不对齐 页面看着不好看索性就隐藏了（如果要保留边框还要另外找方法解决，欢迎小伙伴提供方法）
/deep/.el-table--border {
border: none;
.el-table__cell {
border-right: 0;
}
}
4、不需要打印出得DOM可通过css隐藏掉
html:
<div class="no-print"> 不需要打印得DOM</div>
css:
@media print {
.no-print {
display:none;
}
}
