jsBarCode生成条码并且打印的问题

前提：vue项目中，需要前端生成条码并且打印。

使用了jsBarCode去生成条码，废话不多说 ，上代码：

template部分：

<el-button type="text" icon="el-icon-printer" size="small" @click="dy(scope.row.id)">条码打印</el-button>

<div ref="printDiv" style="display:none;">
	<div v-for="item in selectedRows" :key="item.barCode">
		<div style="margin-top:7px;">
			<img :src="item.barCode | creatBarCode(item.barCode)" style="width:auto; height:150px"/>
		</div>
	</div>
</div>
<iframe ref="printIframe" frameborder="0" scrolling="no" style="margin: 0px;padding: 0px;width: 0px;height: 0px;"></iframe>

script部分：

import JsBarcode from 'jsbarcode'

filters: {
	creatBarCode(barCodeData, printData) {
		console.log("触发条码生成事件");
		console.log(printData);
		let canvas = document.createElement("canvas");
		JsBarcode(canvas, barCodeData, {
			format: "CODE128",
			displayValue: true,
			margin: 10,
			height: 250,
			width: 3,
			fontSize: 30,
			textMargin: 10,
		});
	return canvas.toDataURL("image/png");
	}
},

methods: {
    dy (id) {
	    this.boxLoad = true
	    this.tbBarCodeService.list({
           'current': '1',
            'size': '999999',
            'produceConfirmId': id
        }).then(({data})=>{
		    this.selectedRows = data.records
		    if(this.selectedRows.length === 0){
                this.boxLoad = false
			    return this.$message.warning("该确认单无条码！")
		    }
		    this.printData.count = this.selectedRows.length
		    this.$nextTick(()=>{
			    this.boxLoad = false
			    var printIframe = this.$refs.printIframe
			    var html = this.$refs.printDiv.innerHTML
			    printIframe.setAttribute('srcdoc', html)
			    printIframe.onload = function () {
				    console.log(printIframe.contentWindow)
				    // 去掉iframe里面的dom的body的padding margin的默认数值
				    printIframe.contentWindow.document.body.style.padding = '0px'
				    printIframe.contentWindow.document.body.style.margin = '0px'
				    // 开始打印
				    printIframe.contentWindow.focus()
				    printIframe.contentWindow.print()
			    }
		    })
	    })
    },
}

问题描述：在vue单页面项目中，使用jsbarcode生成的条码并且在iframe中生成预览打印，然后切换路由，再回到打印的页面中，不点击打印按钮，会自动弹出打印预览。

解决思路：1.拦截iframe的生成 2.生成了iframe后 把iframe流关闭掉

因为是在keep-alive中的 所以我们需要在deactivated中去处理 上代码

js部分：

deactivated () {
	var printIframe = this.$refs.printIframe
	var html = this.$refs.printDiv.innerHTML
	printIframe.setAttribute('srcdoc', html)
	printIframe.onload = function () {
	    printIframe.contentWindow.focus()
	    printIframe.contentWindow.close()
    }
},