vue 区域打印

网上最普遍的一个方法,是安装插件: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
      })
    }
原文地址:https://www.cnblogs.com/tuituji27/p/12214728.html