Question

大家好我正在使用这个jQuery函数来打印div内容。第一次显示/打印空白页面。但第二次有效。它会在console.log()中显示div内容，但不会打印这些内容。

我试图找出问题，但坚持下去。请帮忙

提前谢谢。

jQuery.fn.LBCprint = function()
{
    var jStyleDiv = '';
    var strFrameName = ("printer-" + (new Date()).getTime());
    var jFrame = $("<iframe name='"+strFrameName+"'>");
    jFrame.css("width", "1px").css("height", "1px").css("position", "absolute").css("left", "-9999px").appendTo($("body:first"));

    // Get a FRAMES reference to the new frame.
    var objFrame = window.frames[strFrameName];

    // Get a reference to the DOM in the new frame.
    var objDoc = objFrame.document;

    jStyleDiv = $("<div>").append(
        $("style").clone()
    );

    objDoc.open();
    objDoc.write("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
    objDoc.write("<html>");
    objDoc.write("<head>");
    objDoc.write("<title>");
    objDoc.write(document.title);
    objDoc.write("</title>");
    objDoc.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"https://www.abc.com/n/css/main_style_print.css\" />");
    objDoc.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"https://www.abc.com/n/css/dashboard.css\" />");
    objDoc.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"https://www.abc.com/assets/css/pagination.css\" />");
    objDoc.write("</head>");
    objDoc.write("<body>");
    objDoc.write(jStyleDiv.html());
    objDoc.write(this.html());
    objDoc.write("</body>");
    objDoc.write("</html>");
    objDoc.close();

    // Print the document.
    objFrame.focus();
    objFrame.print();

    jStyleDiv = '';

    setTimeout(function(){
        jFrame.remove();
    }, (10000));
}

Answer 1

您可以尝试以下操作：

    html = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">";
    html += "<html>";
    html += "<head>";
    html += "<title>";
    html += document.title;
    html += "</title>";
    html += "<link rel=\"stylesheet\" type=\"text/css\" href=\"https://www.abc.com/n/css/main_style_print.css\" />";
    html += "<link rel=\"stylesheet\" type=\"text/css\" href=\"https://www.abc.com/n/css/dashboard.css\" />";
    html += "<link rel=\"stylesheet\" type=\"text/css\" href=\"https://www.abc.com/assets/css/pagination.css\" />";
    html += "</head>";
    html += "<body>";
    html += jStyleDiv.html();
    html += this.html();
    html += "</body>";
    html += "</html>";

    objDoc.open();
    objDoc.write(html);
    objDoc.close();

Answer 2

替换

后，您的代码可以正常使用

// Print the document.
objFrame.focus();
objFrame.print();

与

// Print the document.
objFrame.onload = function(){
    objFrame.focus();
    objFrame.print();
    jFrame.remove();
};

我猜您的相框有时在打印时无法呈现。

Answer 3

我用这种简单的方式制作它你可以使用$而不是jQuery来简化所有操作，以免发生冲突。我只是打印身体内容。

$.fn.LBCprint = function()
{
 var jStyleDiv = '';
 var strFrameName = ("printer-" + (new Date()).getTime());
 var jFrame = $("<iframe name='"+strFrameName+"'>");
 jFrame.css("width", "1px").css("height", "1px").css("position", 
 "absolute").css("left", "-9999px").appendTo($("body:first"));

 // Get a FRAMES reference to the new frame.
 var objFrame = window.frames[strFrameName];

 // Get a reference to the DOM in the new frame.
 var objDoc = objFrame.document;

 jStyleDiv = $("<div>").append(
    $("style").clone()
 );

objDoc.open();
objDoc.write("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"  
              \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
objDoc.write("<html>");
objDoc.write("<head>");
objDoc.write("<title>");
objDoc.write(document.title);
objDoc.write("</title>");
objDoc.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"https://www.abc.com
              /n/css/main_style_print.css\" />");
objDoc.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"https://www.abc.com
             /n/css/dashboard.css\" />");
objDoc.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"https://www.abc.com
              /assets/css/pagination.css\" />");
objDoc.write("</head>");
objDoc.write("<body>");
objDoc.write(jStyleDiv.html());
objDoc.write(document.body.innerHTML);
objDoc.write("</body>");
objDoc.write("</html>");
objDoc.close();

// Print the document.
objFrame.focus();
objFrame.print();

jStyleDiv = '';

setTimeout(function(){
    jFrame.remove();
}, (10000));
}

这是Fiddle

打印div内容时出错

3 个答案: