HTML 内容保存到word文档（angular4调用第三方js插件实现）

前言：

项目需要将页面内容保存到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（）函数：加载依赖模块并执行加载完后的回调函数。

注意：

1. 目前这个项目加载的模块是本地js。

2. 由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如：1.js需要在2.js前面），依赖性最大的模块一定要放在最后加载。依赖关系很复杂的时候，代码编写和维护会变得困难。

3. 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文档展示：