如何將CSS樣式嵌入到打印預覽中

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 個解決方案

解決方案1
-1 2018-10-21 20:49:16

如何將CSS樣式嵌入到打印預覽中

問題描述

1 個解決方案

解決方案1 -1 2018-10-21 20:49:16

解決方案1
-1 2018-10-21 20:49:16