當(dāng)?shù)谝淮雾?xiàng)目需要用到打印的時(shí)候澡为，內(nèi)心慌的一批，趕緊百度看有沒有好的辦法，結(jié)果不盡人意谷徙。比如：有的需要轉(zhuǎn)PDF再進(jìn)行打印驯绎，有的需要引用插件，而且也沒有明確的文檔剩失，有的用js代碼實(shí)現(xiàn)，但是頁(yè)面點(diǎn)擊的功能會(huì)失效等等....
無(wú)意之中發(fā)現(xiàn)了一個(gè)可以滿足需求的解決方法用：
vue+iframe
在vue的html部分中我們先使用一個(gè)iframe標(biāo)簽引入需要打印的頁(yè)面鸿染，如：
<iframe id="frame" src="./static/html/preview.html" frameborder="0" ref="iframe" style="display: none;"></iframe>
我們先將vue中需要準(zhǔn)備什么
vue文件要將處理的數(shù)據(jù)傳給preview.html中乞巧，要監(jiān)聽數(shù)據(jù)的變動(dòng)：
window.addEventListener('message', this.handleMessage);//mounted鉤子函數(shù)中
this.iframeWin = this.$refs.iframe.contentWindow; //獲取iframe
handleMessage (event) {
// 根據(jù)上面制定的結(jié)構(gòu)來(lái)解析iframe內(nèi)部發(fā)回來(lái)的數(shù)據(jù)
const data = event.data;
console.log('vue文件接收的數(shù)據(jù)',data);
if(data.cmd=='success'){//自己定義一個(gè)判斷是否正常
this.state='ok';
}
}
printing(item){//點(diǎn)擊打印
let iframe = document.getElementById('frame');//獲取iframe標(biāo)簽相當(dāng)于獲取了打印的區(qū)域了
this.iframeWin.postMessage({
cmd:'getFormJson',
info:{//做一下數(shù)據(jù)處理 然后存到自定義的info字段里方便獲取,
fontsize:this.font_size,
},
},'*');
setTimeout((res)=>{
if(this.state=='ok'){
iframe.contentWindow.print();//打印iframe的html頁(yè)面
}
},500)
},
截止到上面的 都是在vue中給iframe傳的數(shù)據(jù)以及監(jiān)聽當(dāng)前頁(yè)面的信息绽媒，將最新的數(shù)據(jù)傳給html文件
下面說(shuō)iframe中引用的html文件如何處理：
window.onload =function(){
window.addEventListener("message", function(event){//自己定義的一個(gè)監(jiān)聽的message
let data = event.data;//event 是vue文件中把已經(jīng)處理好的數(shù)據(jù)傳過(guò)來(lái)的
if(data.cmd=='getFormJson'){//數(shù)據(jù)類型，對(duì)應(yīng)的字段都可以自己定義
let meetname = document.getElementById('meetname');//獲取html頁(yè)面中容器
let con='';
let fontsize=data.info.fontsize;//獲取自己在info定義的數(shù)據(jù)
data.params.map((item)=>{
con+='<div style="font-size:'+fontsize+'px; class="pages" ></div>'
});
meetname.innerHTML = con;
window.parent.postMessage({
cmd: 'success',//收到數(shù)據(jù)以后給vue傳的成功標(biāo)志
params: {
success: true,
}
}, '*');
}
});
}
好了囤热，這樣就完成了获三。希望能有幫助~ ~ ~
