How to print HTML section using JS?

Question

I am using html2Canvas.js to convert HTML element to canvas and then converting canvas to image makes it browser comaptible for printing, is this the correct approach for printing HTML? I find image is the best to way to get similar print in any printer.

Is there any way I can see preview or modify the HTML and save the state? — Deepak K, Nov 27 '12 at 10:55
The best practice would be to créate au `@media print` `css` more simple — Yoann, Nov 27 '12 at 10:59
Maybe it can help you: http://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf — Felipe Oriani, Nov 27 '12 at 11:03

score 0 · Answer 1 · answered Nov 27 '12 at 10:59

0

You can use the javascript function for print

<div onlick='window.print()'>Print</div>

answered Nov 27 '12 at 10:59

Dineshkani

2,715
7
29
43

score 0 · Answer 2 · answered Nov 27 '12 at 11:22

If you add this code to your css:

.toPrint {
  display:none;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

@media print {
   * {
    display: none !important;
  }

  .toPrint {
    display: block !important;
  }

}

And use this code when you want the print view updated:

/** code borrowed from @MicrosoftGoogle */
var canvas = document.getElementById("mycanvas");
var img    = canvas.toDataURL("image/png");

if (document.getElementsByClassName("toPrint")) {
  document.getElementsByClassName("toPrint")[0].src = img;
else
  document.write('<img class="toPrint" src="'+img+'"/>');

How to print HTML section using JS?

2 Answers2