电子打印中的角度应用程序构建一个div显示空白窗口 [英] angular application build in electron print a div shows blank window
问题描述
我开发了一个角度应用程序，然后我在电子中构建了该应用程序.该应用程序运行良好，但是当我单击按钮打印特定的 div 时，它会打开一个空白的电子窗口.我使用 ngx-print 库.它适用于角度发球，但在电子构建时出现问题.
I have developed an angular application then I build that application in an electron. The application works fine but when I click the button to print specific div it opens a blank window of the electron. I use ngx-print library. it works great with angular serve but got a problem with electron build.
<button class="btn btn-raised mr-1 shadow-z-2 btn-success"
printSectionId="print-section" ngxPrint>
print
</button>
<div id="print-section"> Print This</div>
推荐答案
在 ngx-print 代码中我们有这部分来做这个:
in ngx-print code we have this part to do this:
printContents = document.getElementById(this.printSectionId).innerHTML;
popupWin = window.open('_blank', '', 'top=0,left=0,height=100%,width=auto');
popupWin.document.open();
popupWin.document.write("
<html>
<head>
<title>" + (this.printTitle ? this.printTitle : '') + "</title>
<style>
" + this.returnStyleValues() + "
</style>
</head>
<body onload="window.print();window.close()">" + printContents + "</body>
</html>");
popupWin.document.close();
当 electron 尝试打开新窗口时，它会打开一个 BrowserWindowProxy，因此之后如果它尝试访问 popupWin.document，它会变得未定义并显示错误.我们可以告诉 electron 打开一个原生窗口来访问它的打开和对文档的访问，所以在你的 main.js 或 main.ts 你可以尝试:
when electron tries to open new window it opens a BrowserWindowProxy so after that if it tries to access popupWin.document it get's undefined and shows error.
we can tell electron to open a native window to access the open of it and the access to document, so in your main.js or main.ts you can try:
win = new BrowserWindow({
x: 0,
y: 0,
width: size.width,
height: size.height,
webPreferences: {
nativeWindowOpen: true, // add this
nodeIntegration: false
}
});
然后电子将新建一个本地窗口.然后在 ngx-print 代码中的
then the electron will new a native window. then in the ngx-print code the
popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
应该是:
popupWin = window.open('_blank', '', 'top=0,left=0,height=100%,width=auto');
打开一个新的空白页.您可以在 https://electronjs.org/docs 中阅读有关 webPreferences 的更多信息/api/browser-window.
to open a new blank page.
you can read more about webPreferences in https://electronjs.org/docs/api/browser-window.
这篇关于电子打印中的角度应用程序构建一个div显示空白窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
