您好，我正在使用 HTML5 以及 Javascript 和 jQuery 1.10 开发一个网络应用程序。我目前正在使用 javascript 打印功能。此时打印预览看起来像这样(我在下面用红色箭头描述):
我想要实现的是正确格式化页面以 100% 的宽度和高度显示，换句话说，尽可能多地删除空白(红色箭头)。
我的 CSS 代码:
@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 代码:
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;
}
请注意，该网站有两列，但使用 css，我在发送打印时隐藏了正确的部分。
我做错了什么？
如有任何建议或帮助，我们将不胜感激!
提前致谢
更新:解决方案
按照@Jeroen Noten 的建议，我解决了这个在打印前更改 CSS 属性以删除空格的问题。我刚刚添加了这些行:
$("#ContenedorIzquierdo").css({
"width": "100%",
"margin-top": "0px"
});
最佳答案
尝试以下操作:为要包含在打印品中的部分提供一个 ID(例如 <div id="printedSection">)并引用它而不是完整的正文，如下所示:
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>');
并确保在该部分中，内容的宽度没有限制。
关于Javascript 打印函数 : Remove space from preview page，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29662117/