如何将 css 样式嵌入到打印预览中答案

【问题标题】：How to embed css styling into print preview如何将 css 样式嵌入到打印预览中
【发布时间】：2019-03-25 22:56:07
【问题描述】：

我在将 CSS 样式嵌入到我的打印预览页面时遇到问题。这就是我的 index.html 的外观：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8" />
            <title>My App</title>
            <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1">
            <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
                  rel="stylesheet">
            <link href="https://fonts.googleapis.com/css?family=Roboto:100,400" rel="stylesheet">
            <link rel="stylesheet" type="text/css" href="/css/styles.css">

        </head>
        <body>
            <div id="app" style="position: absolute;
                                height: 100%;
                                width: 100%;
                                left: 0%; 
                                top: 0%;">
            </div>
            <script type="text/javascript" src="/bundle.js"></script>
        </body>
    </html>

这些样式在 index.html 上可以正常工作，但当我想创建一个新的打印页面时就不行了：

  alternativePrint(resultId: string){ // Assuming that resultId is unique.
    var printWindow = window.open('', 'PRINT', 'height=800,width=1240');

    printWindow.document.write('<html><head><title>' + document.title  + '</title>');

    printWindow.document.write('<link rel="stylesheet" href="/css/styles.css">');
    printWindow.document.write('</head><body >');
    printWindow.document.write(document.getElementById(resultId).innerHTML);
    printWindow.document.write('</body></html>');

    printWindow.document.close(); // necessary for IE >= 10
    printWindow.focus(); // necessary for IE >= 10*/

    printWindow.print();
    printWindow.close();

    return true;
  }

  call(tel:string){
    window.open('tel:'+tel);
  }

除非我删除这部分，否则打印预览显示为空白：

printWindow.document.write('<link rel="stylesheet" href="/css/styles.css">');

我还尝试将 href 设置为 href="http://localhost:3000/css/styles.css"，当我输入 url 时，我可以访问 css 代码。

更新：像这样的东西也可以正常工作：

printWindow.document.write('<style>h1{color:red}</style>');

【问题讨论】：

只是为了好玩，尝试将 CSS 文件的完整 HTTP 路径放在 link 元素中。
@ScottMarcus 我刚刚尝试过，仍然无法显示空白页，当我将其注释掉内容显示但 ofc 缺乏样式时。
你读过这篇文章吗？ stackoverflow.com/questions/7612794/…
@FrancoFusaro 这似乎是某种解决方案，但我认为这需要相当大的改变，我可能首先看看为什么不能直接从客户端完成，因为它是 html css 的问题javascript。
我刚刚注意到在 Firefox 中工作得非常好，但在 Chrome 中却不行，

标签： javascript html css

【解决方案1】：

我猜你应该把链接改成：

<link rel="stylesheet" type="text/css" href="./css/styles.css">

用“.”，或者：

<link rel="stylesheet" type="text/css" href="css/styles.css">

没有“/”。

【讨论】：

你为什么“猜”这个？ . 不能替代 /。