vue-cli3开发使用jQuery插件完成一键导出Word功能（纯前端）

前言：

最近在做一个【生成报告类的系统】，其中最核心的功能就是“如何一键生成报告”
为了解决这一难题，博主采取了很多方案，也参考了网上的文章，无奈的是，很多文章说的不够仔细、清楚，看了半天收获也不是很大。
对此，我想通过这篇文章总结下，也是互相分享学习。
一般来说，完成导出Word这一功能多多少少都需要后端的支持，网上大致的思路有如下几种：

1. 安装四个依赖包，自己规定模板类
2. 使用在线导出工具（建议不要去用，商用的，仅做参考）
3. 百度模板类（这种个人觉得相对复杂点，博主没怎么看过）
4. 使用jQuery插件——Wordexport.js这种是最简单、粗暴的，可能缺点的话就是在vue中使用了jQuery，代码风格不一致了。

上面罗列的这些可能也不是很全，时间、技术有限，下面就开始用第四种来实现导出Word这一功能。

具体步骤：

无需多说，首先肯定是npm 安装依赖包
【步骤1】
npm install jquery --save
npm install file-saver

在安装jQuery.wordexport.js这一插件的时候需要注意的是，或者说npm install 任意插件的时候，先可以去npm官网和github的issue上去看看有没得这个依赖包，有当然最好，直接install方便些，不然你还要关心路径引入问题。

这个插件没得npm包，所以创建一个JS 文件，直接CV即可。（源码放在文末，素质三连后自提，谢谢朋友们）

【步骤2】
引入到对应需要导出位置，然后。。。。。
有的文章就直接这样说就没了呜呜呜…
我这里在 assets文件夹里面 放了 两个 JS文件
一个是 用于引入jQuery的文件，一个是 插件JS文件。
如图：

然后在引入JQ里面写

import $ from "jquery";
window.$ = $;
window.jQuery = $;
export default $;

对了，差点忘记说，在vue里面使用jQuery有的文章说的需要创建一个vue.config.js文件，然后配置一些东西，我也照办了，但是貌似会报错，应该是引入不成功的错误，然后处理以后，插件还是用不起，所以就换成这样来引入的。

至于说jQuery能不能在vue里面用，网上说法不一致，适合自己的功能就行，我不管，jQuery YYDS
有个关于对此的讨论，
jQuery VS vue
借此也可以看看大佬之间的谈话。

【步骤3】
现在就可以直接在 vue页面里面使用 插件这一功能了，
唯一需要注意的是，路径不能搞错了。
核心代码如下：

在需要导出功能的页面 import

import $ from "../../assets/jq";
import saveAs from "file-saver/dist/FileSaver";
import "../../assets/jqword2";

button按钮点击事件
还有用这个插件时候，需要给导出的页面HTML标签包一个大的div之类的，然后加个id或者class，（如果有就不必了，）目的是为了导出指定的那一部分的内容。

 <el-button
    type="primary"
    round
    style="width: 145px"
    @click="handleExportWord"
    >导出</el-button>

// 导出word
    handleExportWord() {
   
      setTimeout(() => {
   
        $("#word").wordExport("预览demo");
      }, 500);
    },

你可能会遇到的bug：

1. 点击导出时——Uncaught TypeError: Object(…)(…).wordExport is not a function at eval
2. jQuery Word Export: miss