VUE纯前端导出Excel表格

1、需要安装三个依赖：

             npm install -S file-saver xlsx

             npm install -D script-loader

2，下载两个必要的JS  Blob.js   /    Export2Excel.js    然后在SRC文件夹下新建一个excel文件夹 放入 这两个JS文件

　　

 

 

3,在main.js 里面  引入这两个文件模块

 

 

import Blob from './Excel/Blob.js'

import Export2Excel from './Excel/Export2Excel.js'

 

4，最后在你需要的组件里面  写导出功能    ，需要注意 文件夹的大小写 ，与你导入的文件大小写 保持一致  就没有警告

HTML

 <div class="export" @click="outTab">导出当前</div>

JS

 outTab() {

      require

        .ensure([], () => {

          const { export_json_to_excel } = require("@/Excel/Export2Excel"); //注意这个Export2Excel路径  

          const tHeader = [

            "序号",

            "项目名称",

            "方案编号",

            "项目类型",

            "任务类型",

            "任务发布时间",

            "待审查任务",

          ]; // 上面设置Excel的表格第一行的标题

          const filterVal = [

            "id",

            "projectName",

            "schemeNo",

            "projectType",

            "taskStyle",

            "startTime",

            "taskStatus",

          ]; // 上面的index、nickName、name是tableData里对象的属性key值

          const list = this.tableData; //把要导出的数据tableData存到list   这个数组不能为空

          const data = this.formatJson(filterVal, list);

          export_json_to_excel(tHeader, data, "列表excel"); //最后一个是表名字

        })

　　//这里如果 有map报错的话 就加 没有就不加   这边是利用map的遍历 来建Excel表

        .catch((err) => {

          console.log(66666);

        });

    },

    //格式转换,不需要改动

    formatJson(filterVal, jsonData) {

      console.log(jsonData);

      return jsonData.map((v) => filterVal.map((j) => v[j]));

    },