實作列印的幾種方式

首先是浏覽器自帶的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>