Question

我在将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>');

Answer 1

我想您应该将链接更改为：

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

带有“。”，或：

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

不带“ /”。

如何将CSS样式嵌入到打印预览中

1 个答案: