vue实现表格导出excel

最新推荐文章于 2025-07-07 16:38:22 发布

增伟

最新推荐文章于 2025-07-07 16:38:22 发布

阅读量4.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue 导出excel

本文链接：https://blog.youkuaiyun.com/weixin_42645212/article/details/82884277

vue 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍如何在Vue项目中实现表格数据导出为Excel的功能，包括所需依赖的安装、Blob.js和Export2Excal.js的使用方法及代码示例。

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

首先需要安装三个依赖：npm install -S file-saver xlsx (两个依赖)和 npm install -D script-loader(一个依赖)。
在src目录下新建一个文件夹，名字随意，我这里用vendor，然后在该文件夹下放入Blob.js和Export2Excal.js 如图：
Blob.js和Export2Excal.js 下载地址→点击下载

用法：在对应按钮处添加点击事件

<Table  :columns="columns" :data="datas"   id="table1">
    <template slot="header">
        <Row>
            <Col span="4">
                <h4>预算年份：2018年</h4>
            </Col>                    
            <Col span="20">
               <div class="table-head-button" >
                  <Button type="primary"  @click="export2Excel()">预算导出</Button>                             
               </div>    
            </Col>
        </Row>
     </template>
</Table>

 methods: {
    export2Excel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require("../../vendor/Export2Excel");
        const tHeader = this.columns; //表头
        const filterVal =  ['a01', 'a02', 'a03', 'a04', 'a05'];//对应字段
        const list =  this.datas;
        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]));
    }
  }