前言
今天領(lǐng)導(dǎo)給了個(gè)需求，需要配合其他項(xiàng)目組給一個(gè)公共組件的npm進(jìn)行,公共組件打印，打印操作由這個(gè)npm包來操作。（經(jīng)過開會(huì)商討，最后決定配置一個(gè)path路徑，來展示頁面，然后我負(fù)責(zé)在公共這里打印相應(yīng)頁面內(nèi)容。）在這之初都是好著的，首先進(jìn)行配置，這里只需要一個(gè)input框來給后端傳值就可以了，這一步?jīng)]什么好講的，
正傳
好了 正頭戲開始了，通過請(qǐng)求在mounted中發(fā)送請(qǐng)求，獲取到配置好的 path路徑，開始我想著用路由進(jìn)行編寫后來發(fā)現(xiàn)過于麻煩，選擇了iframe標(biāo)簽來進(jìn)行編寫，（這里再說一下留下來的需求，需要彈窗然后展示其他組要展示的內(nèi)容）這里選擇了iframe ，然而iframe的src值如果不是本項(xiàng)目頁面的話 是會(huì)報(bào)跨域的，so（幸好我們是同一個(gè)域名同一個(gè)端口號(hào)） 這里我對(duì)src 路徑的最前面的地址進(jìn)行處理，編寫一個(gè) 獲取域名以及端口號(hào)等的一個(gè)過濾方法，方法如下：
// 獲取http域名
urlhttp() {
console.log(window.location.href, "window.location.href");
// 截取域名前面的部分
const url = window.location.href.split("://")[1];
const urlhttp = window.location.href.split("://")[0];
const urlArr = url.split("/");
const urlStr = urlArr[0];
const urlStrArr = urlStr.split(".");
const urlStrArrLen = urlStrArr.length;
const urlStrArrLenLast = urlStrArrLen - 1;
const urlStrArrLenLastStr = urlStrArr[urlStrArrLenLast];
const urlStrArrLenLastStrLen = urlStrArrLenLastStr.length;
const urlStrArrLenLastStrLenLast = urlStrArrLenLastStrLen - 1;
const urlStrArrLenLastStrLenLastStr = urlStrArrLenLastStr[urlStrArrLenLastStrLenLast];
const urlStrArrLenLastStrLenLastStrNum = Number(urlStrArrLenLastStrLenLastStr);
if (urlStrArrLenLastStrLenLastStrNum) {
this.urlStr = urlStrArr[urlStrArrLenLastStrLenLastStrNum];
} else {
this.urlStr = urlStrArr[urlStrArrLenLastStrLenLastStr];
}
console.log(urlhttp + urlStr, "urlStr");
// 截取域名帶http+域名
this.urlhttpStr = urlhttp + "://" + urlStr;
console.log(this.urlhttpStr, "urlhttpStr");
},
通過次方法，對(duì)頁面域名進(jìn)行格式化，其中window.location.href 獲取的是當(dāng)前地址框的所有地址，然后通過.split(" : / / " )[1];等進(jìn)行數(shù)據(jù)的獲取，最終得到：http://localhost:8080 這種地址，
從而拼接起來我配置的 iframe的src地址拼接后，彈窗展示了相應(yīng)的頁面，
然后在彈窗上給一個(gè)打印按鈕（重頭戲來了） 我先對(duì)iframe標(biāo)簽進(jìn)行ref的設(shè)置，從而獲取該節(jié)點(diǎn)，然后我將
const contentWindow = iframe.contentWindow.document;
節(jié)點(diǎn)進(jìn)行賦值，拿到后直接打印該節(jié)點(diǎn)，
調(diào)用 contentWindow.print(); 方法，發(fā)現(xiàn)打印信息不全的情況，然后我通過翻閱資料方得知 會(huì)有樣式排版等一些問題導(dǎo)致至此，所以次方法pass，過，后又發(fā)現(xiàn)可以通過創(chuàng)建新的頁面進(jìn)行展示打印，然后我調(diào)用
const printWindow = window.open("", "_blank");
printWindow.document.write(`
<html>
<body>
</body>
</html>
`);
去創(chuàng)建新頁面，在新頁面中執(zhí)行打印方法
printWindow.document.close();
printWindow.print();
然后發(fā)現(xiàn)打印后，我iframe中的打印的東西消失了，然后我便復(fù)制一個(gè)子節(jié)點(diǎn)然后再用子節(jié)點(diǎn)打印
const childElementcopy = childElement.cloneNode(true); // 復(fù)制元素
發(fā)現(xiàn)奏效了，但是沒有css樣式，我開始便利子節(jié)點(diǎn)的樣式文章來源：http://www.zghlxwxcb.cn/news/detail-553884.html
Array.from(sourceComputedStyle).forEach(style => {
const value = sourceComputedStyle.getPropertyValue(style);
printElement.style.setProperty(style, value);
});
但是次方法未奏效，嘗試了好多辦法后，我查看元素時(shí)候發(fā)現(xiàn) style標(biāo)簽我可以直接copy旗下所有元素啊 然后便復(fù)制了一份，一起加入打印的新頁面，至此完成次需求，下面是全部代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-553884.html
async submitPrint() {
const iframe = this.$refs.myIframe;
console.log(this.$refs.myIframe, "this.$refs.myIframe");
const contentWindow = iframe.contentWindow.document;
const head = contentWindow.querySelector("head")
// 訪問iframe的子元素
const childElement = contentWindow.getElementById(this.printLocation) || contentWindow.getElementsByClassName(this.printLocation)[0]
//this.printLocation是我后配置的要打印模塊的id
console.log(childElement);
const childElementcopy = childElement.cloneNode(true); // 復(fù)制html元素
const headcopy = head.cloneNode(true); // 復(fù)制css 樣式元素元素
const printWindow = window.open("", "_blank");
// 在前確保先監(jiān)聽
printWindow.document.write(`
<html>
<body>
</body>
</html>
`);
const printBody = printWindow.document.querySelector("body");
const printhead = printWindow.document.querySelector("html");
printhead.appendChild(headcopy);
printBody.appendChild(childElementcopy);
printWindow.onafterprint = function() {
// 在打印對(duì)話框關(guān)閉后執(zhí)行的邏輯
console.log("打印對(duì)話框已關(guān)閉");
// 判斷用戶是否點(diǎn)擊了取消按鈕
var printResult = window.matchMedia("print");
if (printResult.matches) {
console.log("用戶點(diǎn)擊了取消按鈕");
// 執(zhí)行取消打印的相關(guān)邏輯
printWindow.close(); // 關(guān)閉新頁面
} else {
console.log("用戶點(diǎn)擊了打印按鈕");
// 執(zhí)行打印操作的相關(guān)邏輯
printWindow.close(); // 關(guān)閉新頁面
}
};
setTimeout(() => {
printWindow.document.close();
printWindow.print();
}, 500);
// const printBody = printWindow.document.querySelector('body');
// const printhead = printWindow.document.querySelector('html');
// printhead.appendChild(headcopy);
// printBody.appendChild(childElementcopy);
// printWindow.document.close();
// printWindow.print();
// 監(jiān)聽新窗口的onload事件，在加載完成后執(zhí)行打印操作
},
對(duì)你有幫助的話請(qǐng)點(diǎn)贊收藏，你的鼓勵(lì)我會(huì)收到的
到了這里，關(guān)于vue 打印html ＜iframe＞標(biāo)簽（內(nèi)容打?。┏敿?xì)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
