Geek Answers Handbook

How does the Javascript print function work? Can I create a document using javascript and print it?

I know that you can use window.print () to print the current page ... but I want to know if I can create a document using javascript to fill it with data and print it?

Just as you can have html / xml as a javascript object, can you do something like this:

var name = "Matt"; var htmlDocumentToPrint = "<html><body><div style='width:300px; height:20px; background-color:#000; text-align:center;'>My name is " + name + "</div></body></html>"; htmlDocumentToPrint.print();

I don’t need to add colors anyway - I just need to format the document, fill it with data and print it. Is it possible?

+6
javascript dom html printing
source share
8 answers

Print () is a method of a window object. If you create a document in a window using javascript, then invoke printing on this window object, it should work.

 <script type="text/javascript"> var myWindow = window.open('','','width=200,height=100') myWindow.document.write("This is 'myWindow'") myWindow.print(); </script>

Example modified from w3schools.com window opening example.

+4
source share

My first thought:

You can programmatically create an iframe, assign the HTML to print, call the print() function in the context of iframe.contentWindow, and then remove the iframe from the DOM:

 function printHTML(input){ var iframe = document.createElement("iframe"); // create the element document.body.appendChild(iframe); // insert the element to the DOM iframe.contentWindow.document.write(input); // write the HTML to be printed iframe.contentWindow.print(); // print it document.body.removeChild(iframe); // remove the iframe from the DOM } printHTML('<h1>Test!</h1>');

You can test the above snippet here .

+2
source share

print () essentially just calls the native print dialog for the given window.

But, as you think, it will work in any window or (i) frame.

Thus, if you write content in a frame, you can call it to print it. A.

 window.frameName.print();

Please note that the only drawback (and its biggest) is that it causes the print dialog ... not the print preview ... so the user really has no way to see what they print and / or scale it so that it matches their printer / paper.

I personally wish all browsers implement the following to deal with the above problem .; -)

 window.printPreview();
+1
source share

Why not just make everything invisible to media = print, and then make only certain blocks visible with special code?

+1
source share

If you do this while the document is loading, you can use document.write to write the current document, and then print it.

If the page has finished loading, you can use the functions to control the DOM, or preferably use a library such as jQuery or Prototype , then print the current document.

0
source share

Jack, did you try window.print () inside the iframe after loading the document?

0
source share

There is a simple solution in which there is no need to write a function, namely window.print ()

if you want to use it just put - onClick = "window.print ();"

Example

 <a href="" onClick="window.print();">Print</a>

I test it in every browser and it works like a charm!

0
source share

There are three approaches to printing two of them.

  • Print the whole window: window.print(); will work.

  • Printing only a specific frame: window.parent._frame_id_.print(); will work.

  • Printing documentFragment will not work (at least in Firefox): document.createDocumentFragment().print();//undefined

0
source share

More articles:


All Articles