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

      })

    }