admin管理员组

文章数量:1278791

Suppose I have a variable like this in JavaScript:

var h = "<html><head></head><body><h1>Example</h1><p>This is a variable I want to print to the printer with the browser!</p></body></html>"

How can I send the pretty rendered content of this variable to the printer?

I've tried:

var w = window.open();

and then:

$(w).html(h);

and then:

w.print();

But the thing is the Pop-up blocker blocks my new window with the printing page.

Anyone has any idea?

Thank you so much!

Suppose I have a variable like this in JavaScript:

var h = "<html><head></head><body><h1>Example</h1><p>This is a variable I want to print to the printer with the browser!</p></body></html>"

How can I send the pretty rendered content of this variable to the printer?

I've tried:

var w = window.open();

and then:

$(w).html(h);

and then:

w.print();

But the thing is the Pop-up blocker blocks my new window with the printing page.

Anyone has any idea?

Thank you so much!

  • javascript
  • jquery
  • html
  • printing
Share Improve this question asked May 5, 2014 at 19:29 tpgalantpgalan 1962 silver badges14 bronze badges 3
  • is the issue the variable containing the HTML or the pop-up blocker not allowing your new window? Not sure I understand the issue so far. – blurfus Commented May 5, 2014 at 19:37
  • My problem with that approach is the popup blocker. Maybe could exist some other approaches – tpgalan Commented May 5, 2014 at 19:39
  • +1 for everybody answering this question, and all are correct. My problem was, also, trying to "inject" html code with "<html>" and "<style>" tags also. By removing them and writing it to the source page with this CSS rules all went ok. Thank you all. – tpgalan Commented May 5, 2014 at 21:39
Add a ment  | 

3 Answers 3

Reset to default 3

This is one way to approach this problem: http://jsfiddle/DerekL/Fn2Yh/

var h = "<h1>Example</h1><p>This is a variable I want to print to the printer with the browser!</p>";
var d = $("<div>").addClass("print").html(h).appendTo("html");
window.print();
d.remove();

@media only print{
    body{
        display: none;   /*using @media will mess up the page if the user wants to*/
    }                    /*print the page normally. If that's the case you would  */
}                        /*want to set the display of the body to none manually.

By putting the content that is to be printed outside body, you can now simply hide the entire document, leaving the content you need displayed.

OOP: http://jsfiddle/DerekL/sLQzd/

Now normally I would not do this all inline. But for the purpose of this question I felt it was easier to read this way. Basically setup a media style sheet that allows a printable area. then assign your html to that div. Now when print is hit only the #printableArea will be sent to the printer.

<html>
  <head>
    <style type="text/css">
      #printableArea { display: none; }
      @media print
      {
        #non-printableArea { display: none; }
        #printableArea { display: block; }
      }
    </style>
    <script type="text/javascript"> 
      $(document).ready(function () {
        var h = "<html><head></head><body><h1>Example</h1><p>This is a variable I want to print to the printer with the browser!</p></body></html>";
        $("#printableArea").html(h.find("body").html());
      });
    </script>
  </head>
  <body>
    <div id="printableArea"></div>
    <div id="non-printableArea"></div>
  </body>
</html>

Instead of adding a new window, you could add a special printing area to your webpage, which is only visible when printing.

http://jsfiddle/cp3zS/

HTML

<div class="non-printable">
    Foo
</div>

<div class="printable">
</div>

CSS

@media screen {
    .printable { display: none;}
    .non-printable { display: block;}
}
@media print {
    .non-printable { display: none;}
    .printable { display: block;}
}

JS

var h = "<html><head></head><body><h1>Example</h1><p>This is a variable I want to print to the printer with the browser!</p></body></html>"

$('.printable').html(h);
window.print();

本文标签： jquerySend to the printer a javascript variable containing HTML code inside itStack Overflow

版权声明：本文标题：jquery - Send to the printer a javascript variable containing HTML code inside it - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741300849a2371081.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。