前言:
项目需要将页面内容保存到word文档里面,经过查看博客,最简单的方法就是引入两个js文件即可完成这个功能,下面介绍一下是如何实现的。
内容:
一、项目所需文件:
js文件:jquery.wordexport.js和FileSaver.js
地址:[js文件]:https://gitee.com/Tygxyn/codes/r795dplj0f46qgstnxavc62
二、实现步骤
1、在angular根目录的index.html页面添加js引用:
<script src="assets/js/jquery-3.2.1.min.js"></script>
<script src="assets/js/FileSaver.js"></script>
<script src="assets/js/jquery.wordexport.js"></script>
2、在需要使用该插件的组件中做如下操作:
-
xxx.html页面:
button按钮,添加相应的单击事件
<button id='btn1' type="button" style="float:right;width: 100px;margin-right: 90px" class="btn btn-primary" (click)="download()">下载 </button>
-
xxx.ts页面
require()函数:加载依赖模块并执行加载完后的回调函数。
注意:
-
目前这个项目加载的模块是本地js。
-
由于js文件之间存在依赖关系,因此必须严格保证加载顺序(比如:1.js需要在2.js前面),依赖性最大的模块一定要放在最后加载。依赖关系很复杂的时候,代码编写和维护会变得困难。
-
require.js的诞生解决了两个问题:(1)实现js文件的异步加载,避免网页失去响应;(2)管理模块之间的依赖性,便于代码的编写和维护。(下面的js顺序可随意调换都不会影响功能的实现)
download() {
require('../../../../../assets/js/jquery-3.2.1.min.js');
require('../../../../../assets/js/FileSaver.js');
require('../../../../../assets/js/jquery.wordexport.js');
$('#print-section').wordExport("考试情况通报表");
}
原页面效果展示:
下载保存到word文档展示: