Question

我一直致力于一个项目，我只需要打印一个隐藏的div的内容。下面的解决方案工作正常，但用div替换页面内容然后调用窗口的打印，然后用原始内容替换页面。这很好，但是当我在此之后点击页面或尝试再次打印时，页面会刷新。

有没有办法，无需打开新窗口打印div的内容，页面仍然可以正常运行？

$scope.printDiv = function(printable) {
    var restorePage = document.body.innerHTML;
        var printContent = document.getElementById(printable).innerHTML;
        document.body.innerHTML = "<html><head><title></title></head><body>" +  printContent  + "</body>";
        window.print();
        document.body.innerHTML = restorePage;
    };

Answer 1

我创建了一个类似于此的指令。它涉及创建一个新窗口，用你想要打印的HTML填充它，打印那个窗口，然后最后关闭。

代码如下所示：

$scope.printPage = function() {
    var pageToPrint = $window.open('', 'Print Page', 'width=800, height=600');
    pageToPrint.document.write(angular.element(pageHtml).html());
    pageToPrint.document.close();
    pageToPrint.focus();
    pageToPrint.print();
    pageToPrint.close();
}

这适用于所有浏览器，并在用户完成打印对话框窗口后干净地关闭所有内容。

Answer 2

查看我发现的类似问题：AJAX - Print Page Content

似乎answer of Matt Razza正是您正在寻找的。

如果您正在尝试打印隐藏内容，则可以使用两个不同的css文件为不同的媒体（屏幕与打印）在哪里你通过display：none隐藏/取消隐藏所需的内容;然后通过window.print（）生成打印对话框。
<link rel="stylesheet" type="text/css" href="theme1.css" media="screen" />
<link rel="stylesheet" type="text/css" href="theme2.css" media="print" />
<div class="hidden_on_page">YOU CAN'T SEE ME BUT YOU CAN PRINT ME!</div>
<div class="on_page">YOU CAN SEE ME BUT YOU CAN'T PRINT ME</div>
然后在theme1.css：
.hidden_on_page { display: none; }
主题2.css：
.on_page { display: none; }
当你需要时，你会触发打印对话框产生：
window.print();

Answer 3

您可以使用CSS：https://stackoverflow.com/a/356123/1516112

当用户点击您的按钮时，使用div课程将整个页面包裹在.no-print内。接下来，将您的内容添加到上一个div旁边的另一个div中。致电print()并恢复您的信息页。它应该有用。

Javascript会覆盖屏幕上的数据并刷新页面

3 个答案: