Question

我正在使用angualr 2.

我正在尝试打印html div。

这是我的代码

<div id="print-section">
  // Html code
</div>
<button (click)="open()">print</button>

 print(): void {
    let printContents, popupWin;
    printContents = document.getElementById('print-section').innerHTML;
    popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
    popupWin.document.open();
    popupWin.document.write(`
      <html>
        <head>
          <title>Print tab</title>
         </head>
    <body onload="window.print();window.close()">${printContents}</body>
      </html>`
    );
    popupWin.document.close();
}

这是我的open（）

open(){
  //I called Api using service
   let scope=this;
   setTimeout(function() { scope.print(); }, 3000);
}

但我得到了这个错误

错误TypeError：无法读取null的属性'document'。

我该如何解决这个问题？

Answer 1

它被浏览器阻止。 window.open仅在用户操作调用时才被阻止，例如在本机浏览器事件发出的单击事件中。

Answer 2

来自MDN

表示新创建的窗口的Window对象。如果窗口无法打开，返回的值为null。该返回的Window引用可用于访问属性和方法只要它符合同源策略，就可以使用新窗口安全要求。

如果返回null，则表示浏览器已阻止弹出窗口。也许这个动作还没有被用户初始化？

Answer 3

您修复的简单解决方案是将 open（）功能重命名为其他内容，这将修复您的错误消息。

在Chrome检查器控制台中复制/粘贴。

function print() {
    let popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
    popupWin.document.open();
    popupWin.document.write(`
      <html>
        <head>
          <title>Print tab</title>
         </head>
    <body onload="window.print();window.close()">test</body>
      </html>`
    );
    popupWin.document.close();
}
function openOther(){
  //I called Api using service
   let scope=this;
   setTimeout(function() { scope.print(); }, 3000);
}
openOther()

在您的情况下， this 是Window对象，使用打开名称覆盖本机Window.open函数。

尝试打印html文档时无法读取null的属性'document'

3 个答案: