So basically, I have my CSS document that is stopping things from being printed.
Heres my CSS:
/* Making the page A4 compatible */
body
{
margin: 0;
padding: 0;
font: 12pt "Tahoma";
}
*
{
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.page
{
width: 21cm;
min-height: 29.7cm;
padding: 2cm;
margin: 1cm auto;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage
{
height: 237mm;
}
@page
{
size: A4;
margin: 0;
}
@media print
{
.page
{
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
I made the page perfectly A4 compatible, while stopping basically everything from being printed besides a div that has the class of page.
I then call my print via window.print(); from a button far outside of this div, which is just inside of the closing body tag.
Although, I am getting 4 pages being printed. One that is perfect, two that are blank, and one with just the button on it?
All these pages have the annoying footer on them with the URL, date, time and page number. I searched everywhere and this bit of code was meant to remove this, although it didn't do anything at all:
@page
{
margin: 0;
}
Does anyone have any suggestions to why this is happening?
2 Answers 2
<input id="Button1" name="b_print" type="button" runat="server" class="ipt" onclick="printdiv(divIDtoprint);" value=" Print "/>
<script lang="javascript">
function printdiv(printpage) {
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr = document.all.item(printpage).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr + newstr + footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}
Basically just temporarily removes the other stuff on the page, prints whatever you want to print, then puts the old page back in it's place.
4 Comments
Uncaught TypeError: Cannot read property 'innerHTML' of undefined Depending upon the position of your Page No.
@page {
@bottom-right {
// you may have to change this right to left or center as per how it is printed
content: "";
}
}
.pagediv so in your media print styles try hiding the button and it's container (and any extra content not within the.pagediv) withdisplay:none