Javascript printing function: Remove space from preview page
Question
Hi I'm developing a web app using HTML5 with Javascript and jQuery 1.10. I'm currently using the javascript printing function. In this moment the print preview looks like this (I describe below the red arrows):
What I want to achieve is to format correctly the page to display at 100% of width and height, in other word remove as much whitespace as possible (red arrows).
My CSS code:
@media print
{
* {-webkit-print-color-adjust:exact;}
.no-print, .no-print *
{
display: none !important;
}
.print {
position: fixed;
overflow: auto;
z-index: 100000; /* CSS doesn't support infinity */
/* Any other Print Properties */
}
}
Javascript code:
function exportaPDF(){
var mywindow = window.open('', 'CV', 'height=400,width=600');
mywindow.document.write('<html><head><title>Mi CV</title>');
mywindow.document.write('</head><body>');
mywindow.document.write($("body").html());
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
return true;
}
As a note, the website has two columns, but with the css I'm hiding the right part when I send to print.
What am I doing wrong?
Any suggestion or help is appreciated!
Thanks in advance
UPDATE: Solution
Following @Jeroen Noten suggestions, I solved this changing the CSS properties before printing to remove the space. I just added these lines:
$("#ContenedorIzquierdo").css({
"width": "100%",
"margin-top": "0px"
});
1 answers
solution1
1 ACCPTED 2015-04-15 22:40:17
Try the following: give the section that you want to include in your print an ID (eg <div id="printedSection"> ) and refer to that instead of the full body, like so:
mywindow.document.write('<html><head><title>Mi CV</title>');
mywindow.document.write('</head><body>');
mywindow.document.write($("#printedSection").html()); // get only the printed section, not the full body
mywindow.document.write('</body></html>');
And make sure that within that section, there are no constrains to the width of the content.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.