Question

我开发了一个角度应用程序，然后将其应用到电子中。该应用程序运行良好，但是当我单击按钮以打印特定的div时，它将打开电子的空白窗口。我使用ngx-print库。它可以与角发球配合使用，但在电子构造方面存在问题。

<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>

Answer 1

在ngx打印代码中，我们需要执行以下操作：

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中尝试：

win = new BrowserWindow({
    x: 0,
    y: 0,
    width: size.width,
    height: size.height,
    webPreferences: {
      nativeWindowOpen: true, // add this
      nodeIntegration: false
    }
 });

然后，电子将建立一个本机窗口。然后在ngx-print代码中

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/api/browser-window中阅读有关webPreferences的更多信息。

电子打印中的角度应用程序构建div显示空白窗口

1 个答案: