## 一、vue-print-nb插件 1、安装依赖 ``` npm install vue-print-nb --save ``` 2、在min.js中全局注册 ``` import Print from 'vue-print-nb' //引入 Vue.use(Print); //全局注册 ``` 3、页面使用方式一 ```

我是打印区域

``` 4、页面使用方式二 ```

我是打印区域

data() { return { printTest:{ id: 'nbprint', // 打印元素的id 不需要携带#号 popTitle: '页眉标题' // 页眉标题默认浏览器标题空字符串时显示undefined 使用html语言 }, }, ``` 当需要打印的部分有本地图片时，打印之后图片可能不会显示。 ## 二、print.js插件：解决了无法打印本地图片的问题 1、安装依赖 ``` npm install print-js --save ``` 2、页面使用方式 ``` import print from 'print-is'

我是打印区域

打印 dayin(){ 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，使其不打印。非常好用 }, ``` ## 三、通过iframe标签实现打印(我当前使用的) 1、完成需要打印页面，先布局自己想打印的内容 2、在vue页面中使用一个iframe标签引入需要打印的页面 ``` ``` 3、vue中需要做的事 ``` 打印 dayin(item){ let iframe = document.getElementById('print');//获取iframe标签相当于获取了打印的区域了 this.iframeWin.postMessage({ cmd:'getFormJson', info:{//vue传给iframe页面的数据 fontsize:this.font_size, }, },'*'); setTimeout(() => { this.$refs.print.contentWindow.print();//延迟半秒开始打印 }, 500); }, ``` 4、iframe页面做的事 ``` 在页面启动函数中写上下面语句 window.addEventListener("message", (e) => {//自己定义的一个监听的message console.log(e) this.pType = e.data.info//vue传的数据 }); ``` #### 注意:使用elementUI表格打印时，会出现样式问题,表格超出打印页面,无法调试,原因是el的表格宽度是固定的,最好是使用原生table来写