Javascript打印功能：从预览页面删除空间

Question

Hi I'm developing a web app using HTML5 with Javascript and jQuery 1.10. 嗨，我正在使用HTML5和Javascript和jQuery 1.10开发Web应用程序。 I'm currently using the javascript printing function. 我目前正在使用javascript打印功能。 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). 我要实现的是正确格式化页面以使其在宽度和高度的100％处显示，换句话说，请删除尽可能多的空格（红色箭头）。

My CSS code: 我的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 code: 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;
    }

As a note, the website has two columns, but with the css I'm hiding the right part when I send to print. 注意，该网站有两列，但是使用CSS时，我在发送打印时隐藏了正确的部分。

在此处输入图片说明

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. 遵循@Jeroen Noten的建议，我解决了在打印以删除空间之前更改CSS属性的问题。 I just added these lines: 我刚刚添加了以下几行：

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

Answer 1

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: 请尝试以下操作：给要在打印中包括的部分提供一个ID（例如<div id="printedSection"> ），然后引用该ID而不是整个正文，例如：

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. 并确保在该部分中，内容的宽度没有限制。

Javascript打印功能：从预览页面删除空间

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-04-15 22:40:17

Javascript打印功能：从预览页面删除空间

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-04-15 22:40:17

解决方案1
1 已采纳 2015-04-15 22:40:17