Question

我试图在我的Angular应用程序中实现打印功能。这是我到目前为止所做的：

打字稿

print() {

    let printContents, popupWin;
    printContents = document.getElementById('print-section').innerHTML;
    popupWin = window.open();
    popupWin.document.open();
    popupWin.document.write(`
          <html>
            <head>
              <link rel="stylesheet" type="text/css" href="print.component.css">
            </head>
            <body onload="window.print();window.close()">${printContents}</body>
          </html>`
    );
    popupWin.document.close();
  }

HTML

<div id="print-section" hidden>
  <div class="red">Hello</div>
</div>

CSS

.red{
    color:red;
}

印刷品有效，但它不会加载css。如果我在<style>函数中添加write()标记，则可以使用它。为什么没有加载css？ .css文件和.ts文件位于同一文件夹中。

编辑：感谢@match建议我意识到浏览器在当前路径中查找css文件，即www.myurl.it/currentpage/print.component.css。相反，我希望浏览器在sources文件夹中查找文件，即coponents / myComponent。有没有办法做到这一点？

Answer 1

使用

@media print {
      .red{
    color:red;
  }
}

Angular - print函数不加载css

1 个答案: