我有一個要列印的 Vue 組件。當用戶按下print按鈕時，會呼叫一個函式，在新視窗中打開組件以隔離 HTML，并獲得正確的格式。
async openPrintDetailsDialogue() {
const prtHtml = document.getElementById('printable').innerHTML;
let stylesHtml = '';
for (const node of [...document.querySelectorAll('link[rel="stylesheet"], style')]) {
stylesHtml = node.outerHTML;
}
var newWindow = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
newWindow.document.write(`<!DOCTYPE html>
<html>
<head>
${stylesHtml}
</head>
<body id="printme">
${prtHtml}
</body>
</html>`);
newWindow.document.close();
newWindow.focus();
...
然后我嘗試使用$htmlToPaper.
...
await this.$htmlToPaper('printme');
newWindow.close();
}
但是，主視窗會發出警報 Element to print #printme not found!。
VueHtmlToPaper我在我的mounted()函式中添加插件：
mounted() {
Vue.use(VueHtmlToPaper);
}
我已經嘗試將現有的傳遞styles.css給$htmlToPaper()call options，但沒有任何改變。我的vue檔案中也有一些樣式<style scoped>，它們也不能包含在options引數中。
我怎樣才能VueHtmlToPaper“指向”到newWindow？
uj5u.com熱心網友回復：
通過打開一個新視窗，您將擁有一個新的單獨網頁，其中沒有 Vue Js 實體。它不起作用，你不會讓它以這種方式作業。您應該使用模態，更改當前頁面或使用 Vue 實體創建一個新頁面進行列印。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/522746.html