Question

我正在开发一个项目，我想打印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;
}

我在点击打印按钮之前得到的输出： enter image description here

单击打印按钮即可获得输出： enter image description here

Answer 1

您需要将css属性media更改为print。在您的函数createPopup（）中添加新行，如下面附加css：

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

Answer 2

如果您想渲染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;
}

Answer 3

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

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

执行此操作将始终在打印窗口打开之前有足够的时间加载文档和CSS，然后在打印对话框关闭后立即关闭窗口。

Answer 4

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

尝试使用 img 标记。另外，请确保在浏览器中禁用图像选项。

Answer 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样式可能无法用于打印。

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

}

Answer 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，它将忽略样式。

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

使用css打印div内容

8 个答案: