vue 一键导出Excel表格

最新推荐文章于 2024-09-13 15:29:25 发布

GuaX

最新推荐文章于 2024-09-13 15:29:25 发布

阅读量501

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/m0_37714008/article/details/109765666

vue 专栏收录该内容

27 篇文章

订阅专栏

博客介绍了信息技术相关操作，首先需安装3个依赖包，还提到在要导出表格的页面添加按钮并绑定事件，点击按钮执行事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.先安装3个依赖包

代码如下（示例）：

npm install -S file-saver
npm install -S xlsx
npm install -D script-loader
或者
npm install -S file-saver xlsx2.在项目中新建一个文件夹，然后放置两个文件

3. 在要导出表格的页面添加按钮并绑定事件

<el-button @click="handleDownload">下载</el-button>

4. 点击按钮执行事件

    // 下载xlsx
    handleDownload() {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then((excel) => {
        const tHeader = ["Id","name", "Title", "Author", "language", "startTime"];//导出表格的头部命名
        const filterVal = ["id","fileName", "taskId", "creator", "language", "startTime"];// 对应rowData 表格数据字段名
        const list = this.rowData; // rowData 表格数据（数组）
        console.log(list);
        const data = this.formatJson(filterVal, list); // 对数据进行处理
        excel.export_json_to_excel({
          header: tHeader,//  表头
          data,// 数据
          filename: "导出",// 文件名
          autoWidth: true,// true 表格宽度自适应
          bookType: "xlsx",// 导出的文件格式  txt  cvs xlsx
        });
        this.downloadLoading = false;
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'createTime') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },