Print html through JavaScript / jQuery

Question

I wish to print a document by passing custom html code.

The non-working code I have written :

function Clickheretoprint()
{
  var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,"; 
      disp_setting+="scrollbars=yes,width=780, height=780, left=100, top=25"; 
  var content_vlue = document.getElementById("result_tbl").innerHTML; 

  var docprint=window.open("","",disp_setting); 
  docprint.document.open(); 
  docprint.document.write('<html><head><title>Ashley Mattresses</title>'); 
  docprint.document.write('</head><body onLoad="self.print()"><center>');          
  docprint.document.write('<TABLE width="100%" cellpadding=10 align=center  valign="top"><TR valign="top"><TD width = "33%" valign="top">col1</TD><TD width = "33%" valign="top">col2</TD><TD width = "33%" valign="top">col3</TD></TR></TABLE>');     
  docprint.document.write('</center></body></html>'); 
  docprint.document.close(); 
  docprint.focus(); 
  docprint.close();
}

This is the method I called on href of an anchor tag, but the not getting the work done:

<a href="javascript:Clickheretoprint()">

I am a beginner to JavaScript/jQuery coding.

OH NO IT IS URGENT? What is not working? Is there errors in the console? Do you know it is possible to print only certain things on a page without a new window. Look into CSS Print Media. — epascarello
– epascarello, Commented Mar 19, 2012 at 12:22
@epascarello ya i rechecked with little modifications and found to be working in firefox and not in google-chrome. Earlier I was testing on chrome itself so wasn't able to get print. But also the requirement is with chrome browser only, can you please suggest me the way-out ? Also, thanks for the suggestion for CSS Print Media, it's great and will definitely require this for the feature. — HarsH
– HarsH, Commented Mar 19, 2012 at 13:33
Answer #2 is correct, but you will have to add: var disp_setting = "menubar=no;status=no;toolbar=no;"; or the settings of your choice — KAPIL SHARMA
– KAPIL SHARMA, Commented Feb 12, 2013 at 21:20

score 6 · Accepted Answer · 2012-03-19 15:24:44Z

6

You are on the right track. Assuming result_tbl is the ID of element you like to print as-is, first wrap the element with a <div> tag e.g.:

<div>
    <table id="result_tbl">
        .....
    </table>
</div>

Then have such code:

var docprint=window.open("about:blank", "_blank", disp_setting); 
var oTable = document.getElementById("result_tbl");
docprint.document.open(); 
docprint.document.write('<html><head><title>Ashley Mattresses</title>'); 
docprint.document.write('</head><body><center>');
docprint.document.write(oTable.parentNode.innerHTML);
docprint.document.write('</center></body></html>'); 
docprint.document.close(); 
docprint.print();
docprint.close();

Live test case.

Working fine for me under Chrome 18:

print is working

edited Mar 19, 2012 at 15:24

answered Mar 19, 2012 at 12:28

user447356

Sign up to request clarification or add additional context in comments.

8 Comments

HarsH Over a year ago

thanks for the efforts, have checked the live test case, you have provided above, it works and prints nice through mozilla-firefox but unable to do the same with chrome, can you please recheck and suggest me the possible way-out ?

user447356 Over a year ago

@HarsH1610 Chrome 18 here, clicking the button open the Print page of the browser just fine.

HarsH Over a year ago

can you please check this: in chrome's print page the print button is disabled and there isn't any print-preview of the page; is it happening the same at your end ? please suggest !

user447356 Over a year ago

@HarsH1610 see my edit for a screenshot. Maybe you changed some settings? Can you post screenshot showing what you mean?

HarsH Over a year ago

please find my updated screenshot image, Can you guess the problem, now ?

|

Turgut · Accepted Answer · 2012-03-19 12:34:55Z

1

Checkout: http://jsfiddle.net/5Wfqr/3/

For me only source of trouble is:

var content_vlue = document.getElementById("result_tbl").innerHTML;

Do you have element with ID : "result_tbl" within your HTML?

edited Mar 19, 2012 at 12:34

answered Mar 19, 2012 at 12:26

Turgut

5904 silver badges7 bronze badges

2 Comments

HarsH Over a year ago

yes i do have it, just forgot to remove its reference from this sample code, but it doesn't work although i remove this.

HarsH Over a year ago

Thanks for the efforts its working fine with firefox but not with google-chrome browser, can you please suggest the way-out ?

venkatprasad · Accepted Answer · 2014-08-20 09:43:23Z

This code works fine for me

<body>
        <script type="text/javascript">
            function printPage() {

                var docprint = window.open("about:blank", "_blank"`enter code here`, "channelmode");    
                var oTable = document.getElementById("tbl");
                docprint.document.open(); 
                docprint.document.write('<html><head><title>your title</title>'); 
                docprint.document.write('</head><body><center>');
                docprint.document.write(oTable.innerHTML);
                docprint.document.write('</center></body></html>'); 
                docprint.document.close(); 
                docprint.print();
                docprint.close();
            }
        </script>
        <table id="tbl">
            <tr>
                <td> content1 </td>
                <td> content2 </td>
            </tr>
        </table>
        <input type="button" value ="print" id="printButton" onclick="javascript:printPage()"/>
    </body>

Collectives™ on Stack Overflow

Print html through JavaScript / jQuery

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related