1

我使用的是 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 时，paper 结果只有 HTML 内容，没有 CSS 规则，屏幕上的结果是完美的。是否有任何方法可以用于定义所有 css 的 Firefox 打印，任何帮助将不胜感激。

下面的补充是我打印 div 的 javascript

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" 放在链接标签中，但打印预览仍然没有任何效果。

4

4 回答 4

4

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

@media print {
   #printable {
     /*Print style goes here*/
   }
}
于 2012-11-19T17:22:40.040 回答
2

您的脚本写出一些 HTML 来开始加载样式表，然后print()在不等待样式表实际加载的情况下调用。您可能希望在触发print()该加载事件之前不调用。<link>

于 2012-11-22T08:13:10.873 回答
0

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

所以做类似的事情：

<html>
    <head>
        import css here
    </head>
    <body>
        <div id="printable" media="print"></div>
    </body>
</html>
于 2012-11-19T17:26:17.740 回答
0

受到 Boris Zbarsky 的启发，经过更多的谷歌搜索，我得到了它的工作原理：

首先创建一个名为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可以加载该文件。

于 2016-07-09T20:55:51.053 回答