Javascript 如何将css样式嵌入到打印预览中_Javascript_Html_Css

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

javascript html css

Javascript 如何将css样式嵌入到打印预览中,javascript,html,css,Javascript,Html,Css,我在将css样式嵌入打印预览页面时遇到问题。以下是my index.html的外观： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>My App</title> <meta name="viewport" content="width=devic

我在将css样式嵌入打印预览页面时遇到问题。以下是my 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>');

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

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

具有……或：

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

如果没有/

只是为了好玩，请尝试将CSS文件的完整HTTP路径放在link元素中。@ScottMarcus我刚刚尝试过，但仍然无法显示空白页面，当我将其注释掉时，显示的是conent shows，但ofc缺少样式。你读过这篇文章吗@FrancoFusaro这似乎是某种解决方案，但我认为这需要很大的改变，我可能首先看看为什么不能直接从客户端完成这项工作，因为这是html css javascript的问题。我只是注意到在firefox中工作得非常好，但在Chrome中不行，你猜为什么。不是/的替代品。