网上最普遍的一个方法,是安装插件:vue-print-nb
这个确实特别好用,但是比较坑的是,开发完成后npm run build打包dist,放进后端springboot再运行,打印就失效了。
后来又尝试很多种办法,打包后都失效,最后找到一种办法,也是插件,叫print-js
安装:npm install print-js
引用:import printJS from 'print-js'
使用方法:
<div id='printPage'>打印内容</div>
<Button type="primary" @click="print()">打印</Button>
print () {
//打印区域的样式,这部分自定义(我写的是一些表格样式)
const style = '@page{margin:0}@media print{.ivu-table-wrapper-with-border {margin: 0 auto;border: 1px solid #dcdee2;}' +
'.ivu-table th, .ivu-table td,.ivu-table th, .ivu-table td{border-bottom: 1px solid #dcdee2;}}' +
'.ivu-table td, .ivu-table th {height: 48px;}th.ivu-table-column-center, td.ivu-table-column-center{text-align: center;}' +
'.ivu-table-border th, .ivu-table-border td{border-right: 1px solid #dcdee2;}' +
'.ivu-table-cell{word-break: break-all;}'
printJS({
printable: 'printPage',
type: 'html',
style: style,
scanStyles: false
})
}