打印后 SPA 无响应 <div>

Question

我正在为客户构建一个小型站点，作为应用程序的一部分，我需要能够打印 div 的内容。在这里的另一个问题的帮助下，我在控制器中想出了一个小功能，只显示有问题的 div，调出打印对话框，然后 return 返回到原始页面。

self.printDiv = function(divName) {
    var printContents = document.getElementById(divName).innerHTML;
    var originalContents = document.body.innerHTML;

    document.body.innerHTML = printContents;

    window.print();

    document.body.innerHTML = originalContents;
   }

我遇到的问题是 return 进入该页面后，它变得没有响应。单击链接和按钮输出到控制台（在浏览器和我的服务器终端中），就好像它仍在工作一样，但没有明显的变化。

我尝试在一个新的 window 中打开它，但是没有写一个新的 html、控制器、服务、路由等等，我不知道如何让它以这种方式工作任何一个。我也在几个地方尝试了 $location，但这也没有帮助。有什么想法吗？

Answer 1

更好、更快、更简单的方法是使用 @media print 查询。

在我遇到这个博客 post https://joshuawinn.com/css-print-media-query/ 之前，我没有找到任何真正好的说明。

本质上，您将 class 添加到所有您不想打印的标签（在我的示例中我使用 class='noPrint' ），然后将以下内容添加到您的样式表中。

@media print { 
  .noPrint { display: none !important; } 
 }

比我第一次从上面尝试容易得多。

打印后 SPA 无响应 <div>

SPA unresponsive after printing <div>

javascript

angularjs

node.js

express

angularjs-routing