在angularJS单页aplication使用JavaScript打印一个div | S单页aplication使用JavaScript打印一个div

本文介绍了在angularJS单页aplication使用JavaScript打印一个div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在使用angularJS单个页面的Web应用程序。我需要打印某些页面的一个div。
我试过如下：

该页面包含几格（print.html）

 ＆LT; DIV＆GT;
  ＆LT; DIV＆GT;
    不打印
  ＆LT; / DIV＆GT;
  ＆LT; DIV ID =打印＆GT;
    打印该div
  ＆LT; / DIV＆GT;
  ＆LT;按钮NG点击=printDiv（'printableArea'）;＆GT;打印事业部＆LT; /按钮＆GT;
＆LT; / DIV＆GT;

该控制器具有以下脚本：

  $ scope.printDiv =功能（divName）{
    VAR printContents =的document.getElementById（divName）.innerHTML;
    VAR originalContents = document.body.innerHTML;
    document.body.innerHTML = printContents;
    window.print（）;
    document.body.innerHTML = originalContents;
}

这code打印所需的股利，但有一个问题。
声明 document.body.innerHTML = originalContents; 替换整个应用程序的主体，因为它是一个水疗中心。所以，当我刷新页面或者点击打印按钮再次，网页的全部内容被删除。

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

解决方案

  $ scope.printDiv =功能（divName）{
  VAR printContents =的document.getElementById（divName）.innerHTML;
  VAR popupWin = window.open（''，'_blank'，'宽= 300，高度= 300'）;
  popupWin.document.open（）;
  popupWin.document.write（'＆LT; HTML＆GT;＆LT; HEAD＆GT;＆LT;链接rel =stylesheet属性类型=文/ CSS的href =style.css文件/＆GT;＆LT; /头＆GT;＆LT;身体的onload = window.print（）＆GT;'+ printContents +'＆LT; /身体GT;＆LT; / HTML＆GT;'）;
  popupWin.document.close（）;
}

I have a single page web application using angularJS. I need to print a div of certain page.I tried the following:

The page contains few 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>

The controller has following script:

$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;
}

This code prints the desired div but there is a problem.the statement document.body.innerHTML = originalContents; replaces the body of the whole application since it is a SPA. So when I refresh the page or click on print button again, the whole content of the page is erased.

Someone please share some idea to resolve this problem.

解决方案

$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();
}

这篇关于在angularJS单页aplication使用JavaScript打印一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！