Vue2打印功能

一、安装插件

	npm i vue-print-nb --save

注：–save 表示依赖包在生产环境是必须的（默认）； --save-dev表示依赖包在开发环境是必须的

二、引入注册

在main.js引入

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

三、打印内容

1、添加打印的内容

<div id="printTests">
我是打印的内容，可以放包含表格在内的多个盒子
</div>

2、添加打印按钮

<el-button type="primary" icon="iconfont el-icon-sys-printer" v-print="printObj">打印</el-button>

3、data中添加打印对象

data() {
        return {
            printObj: {
                id: "printTests", //打印的ID，与打印内容的盒子id一致
                popTitle: "标题", //打印的标题
            }, 
        }
    }

4、修改打印样式

@media print {
    #printTests{
        zoom: 65%; //调整打印缩放
	}
	//.recordTableStyle { //可以不同盒子不同缩放，调整其他样式
        //	zoom: 65%;
    //}
}

四、参考

参考文章1
参考文章2