代码之家  ›  专栏  ›  技术社区  ›  DevEng

角度材质-如何将CSS样式传递到新窗口

  •  0
  • DevEng  · 技术社区  · 7 年前

    我想在我通过 id 将一个div转换为一个函数,并打印该div。到目前为止,我已经能够通过引导实现这一点。

    print(): void{
            var divToPrint = document.getElementById("table");
    
            let printWindow = window.open("");
            printWindow.document.write('<html><head><link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"  integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"></head><body>');
    
            printWindow.document.write(divToPrint.outerHTML);
            printWindow.document.write('</body></html>');
    
            setTimeout(function(){printWindow.print();printWindow.close();},100);
     }
    

    我从CDN加载boostrap css。

    但是,我想用角度材质实现同样的效果。因此,在我的资产文件夹中,我复制了我正在使用的主题(pink-bluegrey.css),并将链接更新为

    href="assets/pink-bluegrey.css"
    

    我的应用程序能够获取样式表,但仍有一些问题。要么工作表应用不正确,要么我仍然缺少其他脚本/工作表。

    From the app 从应用程序

    From the new print window 从新打印窗口

    1 回复  |  直到 7 年前
        1
  •  0
  •   DevEng    7 年前

    我已经决定,如果我需要打印当前显示在Angular Material中的任何内容,我只需要将其转换为bootstrap,并按照我在原始问题中解释的方式打印它。

    我看着 jspdf html2canvas 但它们都不可靠,并且没有按照文档进行操作。

    我还添加了材质设计Lite( css js )所以我可以结合材料和引导。