电子打印中的角度应用程序构建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打印代码中，我们要做这部分
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("\n <html>\n <head>\n <title>" + (this.printTitle ? this.printTitle : '') + "</title>\n <style>\n " + this.returnStyleValues() + "\n </style>\n </head>\n <body onload=\"window.print();window.close()\">" + printContents + "</body>\n </html>");
popupWin.document.close();
当电子尝试打开新窗口时，它会打开 BrowserWindowProxy ，因此在此之后，如果尝试访问popupWin.document，它将得到未定义并显示错误。
我们可以告诉电子打开一个本机窗口来访问它的打开和对文档的访问，因此在您的 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打印代码中
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');
打开新的空白页。
，您可以在webPreferences 的更多信息。 > https://electronjs.org/docs/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屋！
