Javascript：Window.print() 之后的空 html div 内容答案

【问题标题】：Javascript: Empty html div contents after Window.print()Javascript：Window.print() 之后的空 html div 内容
【发布时间】：2012-10-10 07:05:57
【问题描述】：

点击按钮时，我使用 window.print() of javascript 打印 print_div 内容，

但由于一些安全问题，我想避免多次打印（如使用 Cntrl + P）选项，所以我想清除 print_div 的内容，用户不能一次又一次地重新打印。

这里是粗略的代码，

document.getElementById("print_div").innerHTML = //Some contents to be printed on paper.
window.print()
document.getElementById("print_div").innerHTML = '' // Clearing old contents to avoid mis-use

但是这段代码根本不起作用，它在创建打印预览之前清除 print_div 内容，就像在 chrome 中一样。（我猜，异步工作）

谁能告诉我，这里哪里做错了？

注意：我正在使用 Chrome: 22.0.1229.92 m 测试我的代码，我只想使用 chrome。

【问题讨论】：

如果我在这个页面上打开 devtools 并输入：document.getElementById("content").innerHTML = "Test"; window.print(); document.getElementById("content").innerHTML = ''; 一切都会按预期工作。我将通过“测试”获得预览，当我关闭打印对话框时，#content div 将为空。 window.print() 好像不是异步的。
是的..它在 devtools 上运行良好，但在实际代码中却不行。顺便说一句，我试图通过使用 setTimeOut 来解决这个问题。它很奇怪，但对我有用.. :)

标签： javascript google-chrome printing

【解决方案1】：

这是因为打印窗口没有加载。

var showPrintWindow = function (context) {
        var printWindow = window.open('', '');
        var doc = printWindow.document;
        doc.write("<html><head>");
        doc.write("<link href='/css/printReport.css' rel='stylesheet' type='text/css' media='print' />");
        doc.write("</head><body>");
        doc.write(context);
        doc.write("</body></html>");
        doc.close();

        function show() {
          if (doc.readyState === "complete") {
              printWindow.focus();
              printWindow.print();
              printWindow.close();
          } else {
              setTimeout(show, 100);
          }
        };
        show();
    };

【讨论】：

【解决方案2】：

你可以使用 setTimeout 方法试试看。

setTimeout("your code or function etc",mili seconds)

setTimeout("document.getElementById('print_div').innerHTML = ''",5000);

【讨论】：

是的......这就是我现在所做的......非常感谢...... :)
SetTimeout 函数等待 5 秒，然后在其清除打印 div 后。在您的代码中打印 div 是清除不等待打印。

【解决方案3】：

您在 print_div 中打印，在下一步中您将清除它。因此它显示为空。您可以将打印数据存储在变量中。然后在print_div中显示就可以清空变量了。

var print = "";
print += "<p>Something </p><br/>";
print += "<table><tr><td>Something</td><td>Something</td></tr> 
                <tr><td>Something</td><td>Something</td></tr> </table>";
document.getElementById("print_div").innerHTML = print;
print = "";

类似的东西。将此 javascript 设置为按钮 onsubmit 事件。

【讨论】：

我认为您的解决方案没有多大意义。在print 变量被清除后，document.getElementById("print_div") 仍将包含仍可打印的数据。我们希望防止用户在这里多次打印。

【解决方案4】：

在 Chrome 中遇到了与您类似的问题，它在打印预览中显示空白页。尝试使用 setTimeout 但它没有用。有效的是 window.onload。

<div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

javascript：

    function printDiv(divName) {

        var printContents = document.getElementById(divName).innerHTML;
        w = window.open();

        w.document.write(printContents);
        w.document.write('<scr' + 'ipt type="text/javascript">' + 'window.onload = function() { window.print(); window.close(); };' + '</sc' + 'ript>');

        w.document.close(); // necessary for IE >= 10
        w.focus(); // necessary for IE >= 10

        return true;
    }

【讨论】：

为什么要拆分 ('') 这样的标签？

【解决方案5】：

我不会使用 setTimeout，它只有在用户立即确认打印时才会起作用，你不能盲目假设..

我会做如下的事情：

var html = "<html><head></head><body>" + $("print_div").html() + "</body></html>";
var newWindow= window.open("", "PrintWindow",  
"width=100,height=50,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes");  
newWindow.document.writeln(html);  
newWindow.document.close();  
newWindow.focus();  
newWindow.print();  
newWindow.close();

然后执行擦除

$('print_div').clear();

【讨论】：

【解决方案6】：

setTimeout(function(){printWindow.document.close();
 printWindow.print();}, 500);

会有用的

【讨论】：

请编辑更多信息。不鼓励使用纯代码和“试试这个”的答案，因为它们不包含可搜索的内容，也没有解释为什么有人应该“试试这个”。我们在这里努力成为知识的资源。