Javascript print div fit to page

Question

This problem IMO is more related to CSS but I am open to any solution. I am trying to print a webpage who's height is defined in px (I also tried %). Now What's happening in Safari and IE 8 and onwards, page contents will not print on one page.

Nội dung chính Show

How do I print a specific div?
What is @media print?
How do I print part of a page in JavaScript?

Current Setup

div.parent-container{  
    height: 900px;  
}  

div.parent-container div.child-containers{  
    height:100%;  
}

What's happening

It will print everything on one page in FF but in IE and Safari contents will split in to two pages which is heck of a problem for my users. I have to tell them to set page-margins: 0.3 which is definitely not an efficient way.

What I have done

I have tried different @page and browser specific hacks to make it work but it doesn't prove to be fruitful OR doesn't seem efficient to me( Never been a fan of customized browser hacks).

What I want

CSS/JS solution to make page contents print on one page may be something like 'Shrink to Fit'.

Thanks, Rahi

asked Sep 24, 2012 at 12:59

1

Printing devices usually measure their content in physical dimmensions (in, cm, ft, etc). Pixel width is dependent on monitor resolution, and thus can't be relied upon for every output device.

If it's crucial your page prints the way you'd like it, you'll most likely need a CSS file designed for printing -- one that uses inches, centimeters, or whatever you'd like.

Check out this previous post -- I think it will help.

answered Sep 24, 2012 at 13:19

DawsonDawson

7,5371 gold badge25 silver badges25 bronze badges

2

View Discussion

Improve Article

Save Article

Read

Discuss

View Discussion

Improve Article

Save Article

To print the content of div in JavaScript, first store the content of div in a JavaScript variable and then the print button is clicked. The contents of the HTML div element to be extracted. Then a JavaScript popup window is created and the extracted contents of the HTML div elements are written to the popup window and finally the window is printed using the JavaScript Window Print command.

Example 1: This example uses JavaScript window print command to print the content of div element.

<!DOCTYPE html>

<html>

<head>

<title>

Print the content of a div

</title>

<script>

function printDiv() {

var divContents = document.getElementById("GFG").innerHTML;

var a = window.open('', '', 'height=500, width=500');

a.document.write('<html>');

a.document.write('<body > <h2>Div contents are <br>');

a.document.write(divContents);

a.document.write('</body></html>');

a.document.close();

a.print();

}

</script>

</head>

<body style="text-align:center;">

<div id="GFG" style="background-color: green;">

<h2>Geeksforgeeks</h2>

<p>

This is inside the div and will be printed

on the screen after the click.

</p>

</div>

<input type="button" value="click" onclick="printDiv()">

</body>

</html>

Output:

Example 2: This example uses JavaScript window print command to print the content of div element.

<!DOCTYPE html>

<html>

<head>

<title>

Print the content of a div

</title>

<script>

function printDiv() {

var divContents = document.getElementById("GFG").innerHTML;

var a = window.open('', '', 'height=500, width=500');

a.document.write('<html>');

a.document.write('<body > <h2>Div contents are <br>');

a.document.write(divContents);

a.document.write('</body></html>');

a.document.close();

a.print();

}

</script>

</head>

<body>

<center>

<div id="GFG" style="background-color: green;">

<h2>Geeksforgeeks</h2>

<table border="1px">

<tr>

<td>computer</td>

<td>Algorithm</td>

</tr>

<tr>

<td>Microwave</td>

<td>Infrared</td>

</tr>

</table>

</div>

<p>

The table is inside the div and will get

printed on the click of button.

</p>

<input type="button" value="click"

onclick="printDiv()">

</center>

</body>

</html>

Output:

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.

How do I print a specific div?

To print the content of div in JavaScript, first store the content of div in a JavaScript variable and then the print button is clicked. The contents of the HTML div element to be extracted.

What is @media print?

Print media, as you know is one of them. Print media is one of the oldest and basic forms of mass communication. It includes newspapers, weeklies, magazines, monthlies and other forms of printed journals. A basic understanding of the print media is essential in the study of mass communication.

How do I print part of a page in JavaScript?

JavaScript Code: You can use this function for print a specific area of web page or full web page content. Use printPageArea() function on onclick event of print button element and provide the content area div ID which you want to print.

programming javascript JavaScript page-break