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

一、vue-print-nb：这个插件使用起来便捷，用法如下

1.安装

npm install vue-print-nb --save

2.在main.js文件中注册使用

import Print from 'vue-print-nb'
Vue.use(Print);

3.具体使用方法：（1）直接绑定id方法  （2）绑定对象方法

<!--直接绑定id方法-->
<div id='box'>
   <p>打印内容</p>
   <p>打印内容1111</p>
</div>
<div v-print='#box'>打印</div>

<!--直接绑定对象方法-->
<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 ：解决了无法打印本地图片的问题

1.安装

npm install print-js --save

2.使用

import printJS from 'print-js'

<div id='printBill'>
    <!--需要打印的内容-->
        ...
    <!--需要打印的内容--> 
</div>
<el-button type="primary"  @click="billPrintClick">打印</el-button>

 billPrintClick(){
      const style = '@page {margin:0 10mm};'//打印时去掉眉页眉尾
      //打印为什么要去掉眉页眉尾？因为眉页title时打印当前页面的title，相当于是获取html中title标签里面的内容，但是比如我打印的内容只是一个弹框里面的内容，是没有title的，这时候就会出现undefined，为了避免出现这种情况，就可以隐藏眉页眉尾
      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表格要自己重写表格边框，不然会出现表格边框很粗的情况，预览时看不出来，打印就很明显。在使用了单元格合并也会出现表格边框有的粗有的细的情况，目前还在研究如何解决。