在 Web 开发中，常常需要将页面上的某些内容打印出来，比如一份发票、一篇文章等。本文将介绍如何在 AngularJS 单页应用中使用 JavaScript 实现打印 Div 的功能。
步骤
- 首先，在 html 文件中创建一个要打印的 Div，设置好样式和内容。
<div id="printable"> <h1>这是要打印的标题</h1> <p>这是要打印的内容。</p> </div>
- 在 JavaScript 中编写代码，通过获取要打印的 Div 的 innerHTML，创建一个新的窗口并将其插入到其中。
function printDiv() {
var printContents = document.getElementById("printable").innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}- 然后，在控制器中调用该函数即可。比如：
angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.printDiv = function() {
printDiv();
}
});- 最后，在 HTML 中添加一个按钮，并绑定控制器中的函数即可实现打印 Div 的功能。
<button ng-click="printDiv()">打印</button>
深度解析
上述代码中，我们使用了 document 和 window 对象的相关属性和方法。
document.getElementById("printable").innerHTML：获取 id 为 printable 的元素的 innerHTML；
document.body.innerHTML：设置当前文档的 body 的 innerHTML，即将要打印的内容插入到新页面中；
window.print()：打印新页面。
除此之外，我们还使用了 AngularJS 的控制器和 ng-click 指令，实现了更加简洁的代码。
学习意义
本文介绍了如何在 AngularJS 单页应用中使用 JavaScript 实现打印 Div 的功能。通过学习本文，我们可以了解到如何使用 document 和 window 对象，以及如何在控制器中调用函数等知识点。同时，我们还可以提高自己的编程能力和实践经验。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- -----------
------- ---------------------------------------------------------------------------------
-------
----- -------------- -----------------------
---- ---------------
-----------------
----------------
------
------- ---------------------------------
--------
-------- ---------- -
--- ------------- - -----------------------------------------------
--- ---------------- - ------------------------
----------------------- - --------------
---------------
----------------------- - -----------------
-
----------------------- ------------------------ ---------------- -
--------------- - ---------- -
-----------
-
---
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29336