实现打印的几种方式

首先是浏览器自带的api

window.print()

引入第三方库

通过npm 安装插件

1，安装  
	npm install vue-print-nb --save
2，引入  安装好以后在main.js文件中引入 
    import Print from 'vue-print-nb'
3, Vue.use(Print);  //注册
4，现在就可以使用了
　　<div id="printTest" >
　　　	<p>锄禾日当午</p>
			<p>汗滴禾下土 </p>
　　　	<p>谁知盘中餐</p>
　　　	<p>粒粒皆辛苦</p>
　　	</div>
　　	<button v-print="'#printTest'">打印</button>
　　	export default {
    data() {
        return {
            printObj: {
              id: "printMe",
              popTitle: 'good print',
              extraCss: 'https://www.google.com,https://www.google.com',
              extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
            }
        };
    }
}
           

手动下载插件到本地

[打印插件地址](https://github.com/xyl66/vuePlugs_printjs)
在src下新建文件夹plugs,将下载好的print.js放入plugs文件夹下，然后操作如下
import Print from '@/plugs/print'
Vue.use(Print) // 注册
<template>
<section ref="print">
	打印内容
	<div class="no-print">不要打印我</div>
</section>
</template>
export default {
this.$print(this.$refs.print) // 使用
   qrcodeImg.innerHTML = ""; // 如果不是每次滞空，那么每次调用都会添加一个二维码
      var qrcode = new QRCode(qrcodeImg, {
        width: 400,
        height: 400,
        text: qrcodeText, // 二维码地址
        colorDark: '#000',
        colorLight: '#fff'
      }
    }
注意事项 需使用ref获取dom节点，若直接通过id或class获取则webpack打包部署后打印内容为空 
指定不打印区域
 方法1. 添加no-print样式
<div class="no-print">不要打印我</div>