Question

我一直在争论这个问题很长一段时间了，并且（仍然）无法用它的样式打印我的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
通过更好地理解问题来改变问题/细节

Answer 1

由于您提供了一个空字符串作为新窗口的URL（open函数的第一个参数），因此其中的页面很可能无法确定样式表的位置（因为它的地址是＆＃34;相对于没有＆＃34;）。尝试指定样式表的绝对URL。

此外，media="screen"属性应更改为media="print"

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

Answer 2

尝试使用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>

Answer 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;
});

Answer 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);

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

4 个答案: