CODEWITHSUNDEEP
javascripturlprinting
cvic
cvic

Reputation: 73

Printing the contents of a URL - javascript

I have a php page which has a chart, a date picker(calendar) and a few buttons.

I want to add another button "Print Chart" which ONLY prints the chart & not the entire page ,in a local printer.

I am trying to do this by a having another script(which only outputs a chart) and using the javascript function 'window.print'

html

<input type="button" onClick="printChart()"   value="Print Chart">

javascript

function printChart(){

    var myParameters = window.location.search;// Get the parameters from the current page

    var URL = "http://my_server/my_folder/my_script_that_outputs_only_my_chart.php"+myParameters;

    var W = window.open(URL);

    W.window.print(); // Is this the right syntax ? This prints a blank page and not the above URL
}

I tried the above code - it doesnt work. A blank page gets printed.

Is there a way to print a target URL ? If yes, is it possible to print it without having to open a new window ?

Thanks for your time

Upvotes: 6

Views: 24030

Answers (3)

TigerTiger
TigerTiger

Reputation: 10806

Try using CSS @media print

I want to add another button "Print Chart" which ONLY prints the chart & not the entire page ,in a local printer.

Just try javascript print, and then create a css class like

@media print {
.onprinthide { display: none; }
}

and apply to all of those elements which are not required for printing.

Upvotes: 0

Matthew Groves
Matthew Groves

Reputation: 26151

You could use a print stylesheet...


<link rel="stylesheet" type="text/css" media="print" href="print.css" />

...in addition to your normal style sheet. In print.css, just make everything "display: none;" except what you want to print.

Upvotes: 5

Tony Heupel
Tony Heupel

Reputation: 1053

Try removing the W.window.print() call and adding a 

<body onload="window.print();">
...
</body>

to your php document to make sure your document is ready before it prints, and just have that page print itself.

As for printing from that page by itself, adding a

  <input type="button" value="Print" onclick="window.print();" />

should work.

Upvotes: 5

Related Questions