Javascript 打印功能：从预览页面中删除 space

Question

您好，我正在使用 HTML5 以及 Javascript 和 jQuery 1.10 开发网络应用程序。我目前正在使用 javascript 打印功能。此时打印预览看起来像这样（我在下面用红色箭头描述）：

我想要实现的是正确设置页面格式，以 100% 的宽度和高度显示，换句话说，尽可能多地删除白色space（红色箭头）。

我的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 属性以删除 space。我刚刚添加了这些行：

        $("#ContenedorIzquierdo").css({
            "width": "100%",
            "margin-top": "0px"
        });

Answer 1

尝试以下操作：为要包含在印刷品中的部分提供一个 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 打印功能：从预览页面中删除 space

Javascript printing function: Remove space from preview page

html

javascript

css

printing

jquery