Question

您好我正在使用带有Javascript和jQuery 1.10的HTML5开发一个Web应用程序。我目前正在使用javascript打印功能。在这一刻，打印预览看起来像这样（我在红色箭头下面描述）：

enter image description here

我想要实现的是正确格式化页面以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;
    }

作为一个注释，该网站有两列，但是当我发送打印时，我正在隐藏正确的部分。

enter image description here

我做错了什么？

感谢任何建议或帮助！

提前致谢

更新：解决方案

按照@Jeroen Noten的建议，我解决了在打印前更改CSS属性以删除空间的问题。我刚刚添加了以下几行：

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

Answer 1

请尝试以下操作：在打印件中提供您要包含的部分（例如<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打印功能：从预览页面中删除空间

1 个答案: