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

jbu*_*483 5 html css printing-web-page kendo-grid

我已经与这个问题斗争了很长一段时间,并且(仍然)无法使用其样式打印我的 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;

});
Run Code Online (Sandbox Code Playgroud)

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

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

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

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

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

编辑历史

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

Ind*_*dra 3

尝试使用 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>
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)