在angularJS单页应用中使用javascript打印div

发布时间：2020-12-17 08:27:01 所属栏目：安全来源：网络整理

导读：我有一个单页面的web应用程序使用angularJS。我需要打印某个页面的div。我试过以下：该页面包含几个div(print.html) div div Do not print /div div id="printable" Print this div /div button ng-click="printDiv('printableArea');"Print Div/button/di

我有一个单页面的web应用程序使用angularJS。我需要打印某个页面的div。
我试过以下：

该页面包含几个div(print.html)

<div>
  <div>
    Do not print
  </div>
  <div id="printable">
    Print this div
  </div>
  <button ng-click="printDiv('printableArea');">Print Div</button>
</div>

控制器具有以下脚本：

$scope.printDiv = function(divName) {
    var printContents = document.getElementById(divName).innerHTML;
    var originalContents = document.body.innerHTML;        
    document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
}

此代码打印所需的div，但有问题。
语句document.body.innerHTML = originalContents;取代了整个应用程序的主体，因为它是一个SPA。因此，当我刷新页面或再次单击打印按钮时，页面的整个内容将被删除。

有人请分享一些想法来解决这个问题。

$scope.printDiv = function(divName) {
  var printContents = document.getElementById(divName).innerHTML;
  var popupWin = window.open('','_blank','width=300,height=300');
  popupWin.document.open();
  popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + printContents + '</body></html>');
  popupWin.document.close();
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!