Question

我正在使用firefox 16.0.2。我想使用导入文件中定义的css规则打印div内容。当尝试在Chrome中打印时，它工作正常，但在Firefox中，打印页面没有格式化的CSS。

<html>
    <head>
        import css here
    </head>
    <body>
        <div id="printable"></div>
    </body>
</html>

当使用javascript打印div id = printable时，纸质结果只有一个没有CSS规则的HTML内容，屏幕上的结果是完美的。有没有任何方法可以定义所有css的Firefox打印，任何帮助将不胜感激。

以下是我的javascript打印div

function print(id) 
{
    var mywindow = window.open('', id, 'height=600,width=800');
    var data = document.getElementById(id).innerHTML;
    mywindow.document.write('<html><head><title>Print</title>');
    mywindow.document.write('<link rel="stylesheet" href="../../lib/css/report/main.css" type="text/css" />');
    mywindow.document.write('</head><body >');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');


    mywindow.print();
    mywindow.close();

    return true;
}

在main.css中我尝试使用@media print {#printable .....}但它不起作用。在Javascript中我尝试将media =“print”设置为链接标签，但它仍然没有影响打印预览。

Answer 1

为什么不使用特定于打印的媒体查询？

@media print {
   #printable {
     /*Print style goes here*/
   }
}

Answer 2

您的脚本会写出一些HTML来启动样式表加载，然后调用print()而不等待样式表实际加载。您可能不希望在print()的加载事件被触发之前调用<link>。

Answer 3

或者......尝试将media =“print”添加到您的div

所以做的事情如下：

<html>
    <head>
        import css here
    </head>
    <body>
        <div id="printable" media="print"></div>
    </body>
</html>

Answer 4

受到鲍里斯·扎尔斯基的启发，经过更多的谷歌搜索，我得到了以下工作：

首先创建一个名为 print.html 的存根HTML文件：

<!doctype html>
<html lang='en-us'>
<head>
<meta charset='utf-8'>
<!-- the print.css link doesn't need to be of media type 'print' -->
<link rel='stylesheet' type='text/css' href='print.css'>
</head>
<body>
  <div id='print_this'>
    <!-- All the 'printable' stuff will be inserted here -->
  </div>
</body>
</html>

然后在要打印的html文档中使用 jQuery ，在下面创建一个窗口对象（名为 print_window ）并使用 HTML存根加载它文件，然后收集您要打印的所有HTML并将其填入 print_window 对象。然后打印窗口对象：

// ============= jQuery ===============
function divPrint() 
{
    var print_window = window.open('print.html');  // Loads the HTML stub file
    // Do this in an onLoad event to make sure, before printing, CSS and all else
    // is loaded and ready -- else you'll likely get a blank page.
    print_window.onload = function () {
        // Create an array, containing the print_window object, that will be passed to the each() method.
        var pw = [this];
        // Find each element of class printable and grab its inner HTML and insert it into
        // the stub's 'print_this' block.
        $('.printable').each(function(index) {
            pw[0].document.getElementById('print_this').insertAdjacentHTML('beforeend', $(this).html());
        }, pw);

        // Print the print_window which is now embellished with all the stuff that was tagged as printable.
        this.print();
        this.close();
    }
}


$(document).ready(function() {
    $('#btnPrint').click(function(){
        divPrint();
    });
});

，以下是上述jQuery代码可能处理的示例（也在同一文件中）：

<!-- Note that the button doesn't get printed because it is not of class 'printable' -->
<button type='button' id='btnPrint'>Print Page</button>
<div id='stuff_not_to_print'>
  <h1>Your mother wears army boots!</h1>
</div>
<div class='printable'>
  <p>Your mother is a swell lady who's pretty, too!</p>
</div>
<div class='printable'>
  <p>Yer dad's pretty cool, too!</p>
</div>
<div>
  <p>This won't print!</p>
</div>

然后，如果您想要将上述HTML格式化为非常类似，则创建一个名为 print.css 的 CSS 文件，即HTML存根文件 print.html ，可以加载。

打印时Firefox无法应用CSS

4 个答案: