一、vue-print-nb插件
1、安装依赖
npm install vue-print-nb --save
2、在min.js中全局注册
import Print from 'vue-print-nb' //引入
Vue.use(Print); //全局注册
3、页面使用方式一
<div id="printTest" >
<p>我是打印区域</p>
</div>
<button v-print="'#printTest'">打印</button>
4、页面使用方式二
<div id="printTest" >
<p>我是打印区域</p>
</div>
<button v-print="printTest">打印</button>
data() {
return {
printTest:{
id: 'nbprint', // 打印元素的id 不需要携带#号
popTitle: '页眉标题' // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
},
},
当需要打印的部分有本地图片时，打印之后图片可能不会显示。
二、print.js插件 ：解决了无法打印本地图片的问题
1、安装依赖
npm install print-js --save
2、页面使用方式
import print from 'print-is'
<div id='printBill'>
<p>我是打印区域</p>
</div>
<el-button type="primary" @click="dayin">打印</el-button>
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标签引入需要打印的页面
<iframe
style="position: absolute; top: -1000px; left: -1000px; width: 100%"
id="print"
ref="print"
:src="iframeSrc"
>
</iframe>
3、vue中需要做的事
<el-button type="primary" @click="dayin">打印</el-button>
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传的数据
});
