Vue项目中将表格内的数据导出为Excel文件

# Vue项目中将表格内的数据导出为Excel文件


~~~markdown
# 首先安装三个依赖
    npm install -S file-saver xlsx
    npm install -D script-loader

# 引入两个js文件
    在src目录下新建excel文件夹，里面放入Blob.js和Export2Excel.js两个JS文件

https://blog-static.cnblogs.com/files/blogs/680574/Export2Excel.js

https://blog-static.cnblogs.com/files/blogs/680574/Blob.js

 

# 在main.js引入这两个文件(路径取决你们的路径)【也可以不引用】
    import Blob from "@/excel/Blob"
    import Export2Excel from "@/excel/Export2Excel"
~~~

### 正确设置路径

~~~js
# 在Export2Excel.js文件中正确导入Blob.js文件

require('script-loader!file-saver');
// require('script-loader!vendor/Blob');
require('@/excel/Blob');
require('script-loader!xlsx/dist/xlsx.core.min');
~~~

### 调用export2Excel()方法即可导出为excel

~~~js
export2Excel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/excel/Export2Excel');
        // 设置Excel的表格第一行的标题
        const tHeader = [];
        const filterVal = this.singleKeys;
        for (let i = 0; i < filterVal.length; i++) {
          let v = this.singleNames[filterVal[i]];
          tHeader.push(v)
        }

        const list = this.tableData;  //把data里的tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, '列表excel');
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
~~~

# Vue项目中将表格内的数据导出为Word文件

~~~markdown
npm install -g cnpm --registry=https://registry.npm.taobao.org

# cnpm install docxtemplater pizzip
    https://docxtemplater.readthedocs.io/en/latest/generate.html

# cnpm install jszip-utils --save
    https://stuk.github.io/jszip/

# cnpm install jszip --save

# cnpm install file-saver --save

~~~

# Vue下载文件

~~~markdown
exportWord () {
      this.$axios({
        method: 'get',
        url: this.$settings.HOST + "media/upload/张三.docx",
        // headers里面设置token
        headers: {
          // 'Content-Type': 'application/json',
          // "token":window.sessionStorage.getItem('token')
        },
        data: {
        },
        // 二进制流文件，一定要设置成blob，默认是json
        responseType: 'blob'

      }).then(res => {
        console.log(res)
        if(!res.data){
          return
        }
        var name = "hehehe.docx";
        // var name = this.date + "月" + this.departmentName +"销售分析统计.xls";
        var blob = new Blob([res.data]);
        var url = window.URL.createObjectURL(blob);
        var aLink = document.createElement("a");
        aLink.style.display = "none";
        aLink.href = url;
        aLink.setAttribute("download", name);
        document.body.appendChild(aLink);
        aLink.click();
        document.body.removeChild(aLink); //下载完成移除元素
        window.URL.revokeObjectURL(url); //释放掉blob对象
      })
    },
~~~