JavaScript to Print a page in Apps Script project
Dear, it's easy to print a page in apps script/google script here we all see how we easily can print a page on A4 page size. To get this done, we first need to move apps script page and create a project.
To create, follow bellow steps.
Note: You can test this project in a html editor that supports javascript.
We are first create html page that we want to print out on a4 page size.
My code preview look like this.
My code preview look like this.
The code is:
<div id='PrintDiv'>
<table width=100% >
<tr>
<th>Name</th>
<th>Village</th>
<th>Contact</th>
</tr>
<tr>
<td>Ratan Kumar</td>
<td>Satarda</td>
<td>5858555</td>
</tr>
<tr>
<td>Riva Roy</td>
<td>khurdi</td>
<td>85844848</td>
</tr>
<tr>
< td class = 3 > Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. That's why it's for the slightest
to come, who our normal exercise bears up to take advantage of the consequences
</td>
</tr>
</table>
</div>
In above code, you can see that I have put html code in a div element. You have to do so.
I have also used css to make table border green. You have to create your html code or plain text and replace it in this div tag id:
I have also used css to make table border green. You have to create your html code or plain text and replace it in this div tag id:
<divid='PrintDiv'>
Paste your own html code or Plain text as your requirment.
Information under this tag will be printed.
</div>
I have used a button also to run the function when we make a click on it.
<input type="button" name="btnprint" value="Print" onclick="Print('PrintDiv')"/>
The CSS code is:
<style>
table,td{
border-collapse: collapse;
border:1px solid green;
}
</style>
Now we all see the javascript code that initiate the printor.
Javascript code is:
<script>
function Print(DivID) {
var iPrint = document.getElementById(DivID).innerHTML;
var docprint=window.open("","");
docprint.document.open();
docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');
docprint.document.write('<head><meta name="viewport"
content="width=device-width, initial-scale=1.0">');
docprint.document.write('<title>Print</title>');
docprint.document.write('<style type="text/css">@page {size:auto;margin:0.2em;}');
docprint.document.write('table,td{ border:1px dashed red;}</style>');
docprint.document.write('</head><center><body onLoad="self.print()">');
docprint.document.write(iPrint);
docprint.document.write('</body></center></html>');
docprint.document.close();
docprint.focus();
}
</script>
- In above code you you can re-design your page look.
- I have change the table border color Green to Red in printed page.
- To get this done, you have to code int this area of the Javascript code:
docprint.document.write('<style type="text/css">@page {size:auto;margin:0.2em;}');
docprint.document.write('table,td{ border:1px dashed red;}</style>');
- Please note that you can add all css in above code between <style> tag.
Like this:
docprint.document.write('<style type="text/css">@page {size:auto;margin:0.2em;}');
docprint.document.write('Your new css code');
docprint.document.write('Your new css code for other tag');
docprint.document.write('</style>');
Full code is here:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
table,td{ border-collapse: collapse;border:1px solid green;}
</style>
</head>
<body>
<script>
function Print(DivID) {
var iPrint = document.getElementById(DivID).innerHTML;
var docprint=window.open("","");
docprint.document.open();
docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');
docprint.document.write('<head><meta name="viewport" content="width=device-width,
initial-scale=1.0">');
docprint.document.write('<title>Print</title>');
docprint.document.write('<style type="text/css">@page {size:auto;margin:0.2em;}');
docprint.document.write('table,td{ border:1px solid red;}</style>');
docprint.document.write('</head><center><body onLoad="self.print()">');
docprint.document.write(iPrint);
docprint.document.write('</body></center></html>');
docprint.document.close();
docprint.focus();
}
</script>
<div id='PrintDiv'>
<table width=100% >
<tr>
<th>Name</th>
<th>Village</th>
<th>Contact</th>
</tr>
<tr>
<td>Ratan Kumar</td>
<td>Satarda</td>
<td>5858555</td>
</tr>
<tr>
<td>Riva Roy</td>
<td>khurdi</td>
<td>85844848</td>
</tr>
<tr>
<td colspan=3> Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</td>
</tr>
</table>
</div>
<input type="button" name="btnprint" value="Print" onclick="Print('PrintDiv')"/>
</body>
</html>
Preview:
>>>TRY TO CHECK OUT , IF ANY ERROR FOUND. PLEASE LET ME KNOW BY COMMENT.
I'LL TRY MY LEVEL BEST TO FIX THE PROBLEM.
THANKS FOR VISITING CodyLab
Have a nice day!
-------------------------- -------------------------