stackoom
  简体   繁体   中英

Error in printing the div content

 原文  2014-08-27 15:04:39  5   3    javascript/ jquery/ dom

Question

Hi guys i am using this jQuery function for printing the div contents. 1st time it show/print the empty page. but 2nd time it works . it show the div content's in console.log() but not print these contents.

i am trying to find out the issue but stuck on it. please help

thanks in advance . 

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

3 answers

solution1
 0  2014-08-27 15:10:41

You can try the following: 

    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();

solution2
 0 ACCPTED  2014-08-27 16:19:38

Your code works fine for me after replacing 

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

with 

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

I guess your frame sometimes isn't rendered at printing.

solution3
 0  2014-08-27 17:40:49

I made it this simple way and You can use $ instead of jQuery to make all simple so that no conflict happens. I just print body content. 

$.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));
}

Here is Fiddle

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Printing the content of a div stop printing after done printing div content Printing the content of a div with vertical scroll printing div content with css applied error in printing the specific div Printing error of a div of HTML page Error disabling the div content how to style content of div on printing page using javascript/jquery? While typing in a text input field, printing the content typed in a div Trouble in printing a div content with text fields using javascript?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM