实现打印功能

打印功能可以自己使用原生js（window.print()）实现，其次就是使用插件。

vue-print-nb

这个插件使用起来便捷，用法如下

安装

npm install vue-print-nb --save

注册

在main.js文件中注册使用

import Print from 'vue-print-nb'; //引入
Vue.use(Print); //注册

使用

（1）直接绑定id方法

<div id='box'>
   <p>打印内容</p>
   <p>打印内容1111</p>
</div>
<div v-print='#box'>打印</div>

（2）绑定对象方法

<div id='box'>
   <p>打印内容</p>
   <p>打印内容1111</p>
</div>
<div v-print='printObj'>打印</div>

export default{
   data(){
      return {
         printObj:{
            id:'box',
            //其他配置项，
         }
      }
   }
}

缺点：

（1）无法打印本地图片，当需要打印的部分有本地图片时，打印之后图片不会显示。

（2）使用elementUI表格vxe-table表格打印时，会出现样式问题

print-js

解决了无法打印本地图片的问题

安装

npm install print-js --save

使用

import print from 'print-is'

<div id='printBill'>
    <!--需要打印的内容-->
        ...
    <!--需要打印的内容--> 
</div>

<button type="primary"  @click="billPrintClick">打印</button>

 billPrintClick(){
      const style = '@page {margin:0 10mm};'//去掉眉页眉尾
      printJS({
        printable: 'printBill',// 标签元素id
        type: 'html',
        header: '',
        targetStyles: ['*'],
        style
      });
    },

各个配置项：

printable:要打印的id。

type:可以是 html 、pdf、 json 等。

properties:是打印json时所需要的数据属性。

gridHeaderStyle和gridStyle都是打印json时可选的样式。

repeatTableHeader:在打印JSON数据时使用。设置为时false，数据表标题将仅在第一页显示。

scanStyles:设置为false时，库将不处理应用于正在打印的html的样式。使用css参数时很有用，此时自己设置的原来想要 打印的样式就会失效，在打印预览时可以看到效果

targetStyles: [’*’],这样设置继承了页面要打印元素原有的css属性。

style:传入自定义样式的字符串，使用在要打印的html页面 也就是纸上的样子。

ignoreElements：传入要打印的div中的子元素id，使其不打印。非常好用

注意点：

（1）打印预览时样式写法

@media print {
  /*样式内容*/
}

（2）css设置打印时强制分页，使用这个属性，该div的以后的内容就会在打印时分页（此属性在div display属性为flex时无效，使用了浮动float时也会无效）

.print{
   page-break-after:always
}

（3）table自动分页

 table tr{
          page-break-inside:avoid; 
          page-break-after:auto
        }

（4）打印最好使用原生table标签，使用其他ui框架会出现很大的样式问题，使用原生table表格要自己重写表格边框，不然会出现表格边框很粗的情况，预览时看不出来，打印就很明显。在使用了单元格合并也会出现表格边框有的粗有的细的情况，目前还在研究如何解决。