打印应用 css 的 div 内容答案

【问题标题】：printing div content with css applied打印应用 css 的 div 内容
【发布时间】：2022-01-25 05:19:13
【问题描述】：

我正在做一个项目，我想打印 div 内容。我使用的代码满足了我的要求，但是我得到了简单的输出，没有应用 Css，也没有得到图像。请帮助我。我附上了我得到的代码和输出以及我想要的输出。

代码：

function PrintElem(elem) {
    Popup($(elem).html());
}

function Popup(data) {
    var mywindow = window.open('', 'new div', 'height=400,width=600');
    mywindow.document.write('<html><head><title></title>');
    mywindow.document.write('<link rel="stylesheet" href="css/midday_receipt.css" type="text/css" />');
    mywindow.document.write('</head><body >');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');

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

    return true;
}

点击打印按钮前我得到的输出：

我通过单击打印按钮得到的输出：

【问题讨论】：

请提供一个 JSFiddle 或相关的 HTML 源代码，我们可以重现您的问题？
分享一些 HTML 和 CSS 会更好。 jsfiddle.net 会更大。您在样式标签内使用媒体属性吗？

标签： javascript asp.net css

【解决方案1】：

如果您想渲染 CSS，您必须在打印之前添加超时，因为 CSS 需要一些时间才能应用到 HTML，然后您才能打印它。

试试这个：

function Popup(data) {
      var mywindow = window.open('', 'new div', 'height=400,width=600');
      mywindow.document.write('<html><head><title></title>');
      mywindow.document.write('<link rel="stylesheet" href="css/midday_receipt.css" type="text/css" />');
      mywindow.document.write('</head><body >');
      mywindow.document.write(data);
      mywindow.document.write('</body></html>');
      mywindow.document.close();
      mywindow.focus();
      setTimeout(function(){mywindow.print();},1000);
      mywindow.close();

      return true;
}

【讨论】：

谢谢。在我添加超时之前，我几乎为此发疯了。
新窗口会立即关闭。用以下方法修复它。 setTimeout(function(){ mywindow.print(); mywindow.close(); },1000);

【解决方案2】：

您需要将 css 属性 media 更改为 print。将新行添加到您的函数 createPopup() 中，如下所示附加您的 css：

mywindow.document.write( "<link rel=\"stylesheet\" href=\"style.css\" type=\"text/css\" media=\"print\"/>" );

【讨论】：

注意，当使用 media="print" 时，它确实阻止了 CSS 应用于新窗口中呈现的 html。相反，我不得不使用 media="all"

【解决方案3】：

我的建议是在<body> 标记中添加一些javascript 来进行打印和关闭。

<body onload="window.print();window.close()">

这样做总是会在打印窗口打开之前留出足够的时间让文档和 CSS 加载，然后在打印对话框关闭后立即关闭窗口。

【讨论】：

这是最好的答案，而不是在投票率较高的答案中等待任意时间。
我正在使用 React 并渲染页面以传递到弹出窗口中，onLoad 无论出于何种原因都不会保留。我的解决方案是在包含打印行的正文之后添加一个<script/> 标签。对我来说效果一样。

【解决方案4】：

如果您使用图片作为网站的背景图片，您肯定不会得到它，而打印浏览器会禁用所有背景图片。

尝试使用 img 标签。还要确保在您的浏览器中禁用图像选项未选中。

【讨论】：

【解决方案5】：

呈现问题的一个可能原因是您用于 CSS 文件和图像的相对路径。首先，尝试使用绝对路径。呈现 HTML 结构的事实排除了生成新 HTML 文档的问题。另外，将media="print"添加到link元素。

此代码有效，但部分有效：

    (function() {

function createPopup( data ) {
    var mywindow = window.open( "", "new div", "height=400,width=600" );
    mywindow.document.write( "<html><head><title></title>" );
    mywindow.document.write( "<link rel=\"stylesheet\" href=\"style.css\" type=\"text/css\"/>" );
    mywindow.document.write( "</head><body >" );
    mywindow.document.write( data );
    mywindow.document.write( "</body></html>" );

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

    return true;

}
document.addEventListener( "DOMContentLoaded", function() {
    document.getElementById( "print" ).addEventListener( "click", function() {
        createPopup( document.getElementById( "content" ).innerHTML );

    }, false );

});

   })();

我已经删除了 .close() 调用。请记住，某些 CSS 样式可能不适用于打印。

【讨论】：

我尝试使用绝对路径但得到与上面相同的输出
给我一些时间。我会回来做一个演示。 :-)
这是我的测试：Print window content

【解决方案6】：

       function printpage() {
           var getpanel = document.getElementById("<%= Panel1.ClientID%>");
           var MainWindow = window.open('', '', 'height=500,width=800');
           MainWindow.document.write('<html><head><title></title>');
           MainWindow.document.write("<link rel=\"stylesheet\" href=\"styles/Print.css\" type=\"text/css\"/>");
           MainWindow.document.write('</head><body onload="window.print();window.close()">');
           MainWindow.document.write(getpanel.innerHTML);
           MainWindow.document.write('</body></html>');
           MainWindow.document.close();
           setTimeout(function () {
               MainWindow.print();
           }, 500)
           return false;

}

【讨论】：

请避免仅使用代码回答并尝试描述此代码如何帮助解决问题。

【解决方案7】：

传递要打印的div，作为打印函数的输入，

<input type='button' id='btn-print' value='Print Receipt' onclick="printDiv('#invoice-box-id');" />

然后克隆元素，

function printDiv(elem)
{
   renderMe($('<div/>').append($(elem).clone()).html());
}

传递克隆的元素进行渲染，在其中包含样式表。

function renderMe(data) {
    var mywindow = window.open('', 'invoice-box', 'height=1000,width=1000');
    mywindow.document.write('<html><head><title>invoice-box</title>');
    mywindow.document.write('<link rel="stylesheet" href="printstyle.css" type="text/css" />');
    mywindow.document.write('</head><body >');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');


    setTimeout(function () {
    mywindow.print();
    mywindow.close();
    }, 1000)
    return true;
}

如果传递了innerHTML，它将忽略样式。

【讨论】：

【解决方案8】：

我结合起来，让它完美地工作：

function PrintElem(elem)
{
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');

    mywindow.document.write('<html><head>');
    mywindow.document.write("<link href=\"../lib/bootstrap/css/bootstrap.min.css\" rel=\"stylesheet\"><link href=\"../css/core.css\" rel=\"stylesheet\"><link href=\"../css/components.css\" rel=\"stylesheet\"><link href=\"../css/icons.css\" rel=\"stylesheet\">")
    mywindow.document.write('</head><body >');
    mywindow.document.write(document.getElementById('printit').innerHTML);
    mywindow.document.write('</body></html>');

    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/


    setTimeout(function () {
    mywindow.print();
    mywindow.close();
    }, 1000)
    return true;
}

【讨论】：