无法将样式表/脚本插入到 window.open答案

【问题标题】：Unable to insert stylesheet/script into window.open无法将样式表/脚本插入到 window.open
【发布时间】：2014-12-03 10:01:05
【问题描述】：

我已经解决这个问题很长一段时间了，并且（仍然）无法用它的样式打印我的 div。

目前，我的脚本是：

$('#printMeButton').click(function () {
    //alert("a");
    var data = document.getElementById('thisPrintableTable').outerHTML;

    var mywindow = window.open('', data);
    mywindow.document.write('<html><head><title>Print Me!!!</title>');
    // mywindow.document.write('<link rel="stylesheet" type="text/css" href="Site.css" media="screen">');
    mywindow.document.write('</head><body>');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');

    mywindow.document.close();
    mywindow.focus();
    mywindow.print();
    mywindow.close();
    return true;

});

嵌套在 $(document).ready 函数中。

当我包含所需的样式表（当前已注释掉）时，打印预览中不会出现任何内容。

我还有一些脚本会对表格的外观产生影响，因此，我相信这可能是将这些包含在弹出窗口中的关键。

如何将其包含在新的弹出窗口中？

有人可以建议一种按原样打印的方法吗？

编辑历史记录

删除了</head><body>末尾的空格
将var data 更改为outerHTML 而不是innerHTML
因更好地理解问题而改变的问题/细节

【问题讨论】：

标签： css html kendo-grid printing-web-page

【解决方案1】：

尝试使用 window.open 打开一个本地 html 文件，并在其中链接 css。并使用js设置要打印的内容html到本地html文件中。

这是要打印的页面：-

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="test.css" rel="stylesheet" type="text/css" />
    <script src="jquery.js"></script>
</head>
<body>
    <div id="print">
        <div class="red">TODO write content</div>
    </div>
    <button id="print_btn">Print</button>
    <script>
        $('#print_btn').click(function(){
            var newWindow = window.open('print.html','_blank');
            $(newWindow).load(function(){
               $(newWindow.document).find('body').html($('#print').html());
            });
        })
    </script>
</body>
</html>

这里链接了css文件test.css，我在window.open的时候打开了print.html，test.css也链接在了print.html中

现在，在 print.html 中我会写：-

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>

</body>
</html>

【讨论】：

您能否对此进行扩展/详细说明？我有点理解这种可能性，但不是实现

【解决方案2】：

由于您提供了一个空字符串作为新窗口的 URL（open 函数的第一个参数），因此其中的页面很可能无法确定您的样式表在哪里（因为它的地址是“相对于任何东西） ”）。尝试为您的样式表指定一个绝对 URL。

另外，media="screen" 属性应该改为media="print"

mywindow.document.write('<link rel="stylesheet" type="text/css" href="http://my.site/Site.css" media="print"')

【讨论】：

恐怕这行不通。打印效果还是和以前一样简单
我刚刚编辑了答案 - 媒体属性也有问题。
你有没有试过不立即关闭窗口并检查开发者控制台是否有任何错误？

【解决方案3】：

可以通过在执行mywindow.close(); 方法之前引入一些延迟时间来解决该问题。似乎需要一些时间才能应用（加载）CSS，如下所示：

$('#printMeButton').click(function () {
    var content = document.getElementById(id).innerHTML;
    var mywindow = window.open('', 'Print', 'height=600,width=800');
    mywindow.document.write('<!DOCTYPE html><html dir="rtl"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Print</title>');
    mywindow.document.write('<link rel="stylesheet" type="text/css" href="/static/css/styles.css" />');
    mywindow.document.write('</head><body >');
    mywindow.document.write(content);
    mywindow.document.write('</body></html>');
    mywindow.document.close();
    mywindow.focus()
    mywindow.print();

    // this is needed for CSS to load before printing..
    setTimeout(function () {
        mywindow.close();
    }, 250);

    return true;
});

【讨论】：

【解决方案4】：

我们可以使用这种内联样式。

var divToPrint = document.getElementById('DivIdToPrint');

var newWin=window.open('','Print-Window');

newWin.document.open();

newWin.document.write('<html>' +
    '<style>' +
    ".btn-petty-cash-split{display: none}"+
    ".btn-petty-cash-split{display: none}"+
    '</style>' +
    '<body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');

newWin.document.close();

setTimeout(function(){
    newWin.close();
    window.location.reload();
},10);

【讨论】：