vue 导出Excel

最新推荐文章于 2025-06-26 14:04:11 发布

焦玉丽

最新推荐文章于 2025-06-26 14:04:11 发布

阅读量4.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.csdn.net/JYL15732624861/article/details/79743877

前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍在Vue项目中如何使用Table组件导出数据为CSV格式，以及如何利用特定库将JSON数据转换并导出为Excel(.xlsx)格式的方法。

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

导出为Excel的功能，记录两个方法：

1.vue中Table组件中自带exportCsv方法，可以实现导出功能，并且可以实现自定义导出列

方法名	说明	参数
exportCsv	将数据导出为 `.csv` 文件，说明：支持IE9~IE11、Edge、Chrome、Safari、Firefox 全系列浏览器。 IE9、Safari 需要手动修改后缀名为 `.csv`。 IE9暂时只支持英文，中文会显示为乱码。	params(Object): filename 文件名，默认为 table.csv original 是否导出为原始数据，默认为 true noHeader 不显示表头，默认为 false columns 自定义导出的列数据 data 自定义导出的行数据 callback 添加此函数后，不会下载，而是返回数据 separator 数据分隔符，默认是逗号(,) quoted 每项数据是否加引号，默认为 false 说明：columns 和 data 需同时声明，声明后将导出指定的数据，建议列数据有自定义render时，可以根据需求自定义导出内容

实例：

Table组件，绑定表格中的信息为positionData

 <Table id='t1' :height="height" ref="tableM"   size="small":columns="positionColumns" :stripe="true" :data="positionData" border ></Table>

导出按钮上绑定export()函数

<Button type="primary" size="small" @click="export()"> 导出  </Button>

export函数：$refs父组件需要数据来源，所以要在Table组件中注册ref="tableM"

export() {
            this.$refs.tableM.exportCsv({
                filename: '表格',//自定义文件名
                //columns: this.positionColumns.filter((col, index) => index < 2),自定义导出列
            });           
        },

更多可参考官网：https://www.iviewui.com/components/table

通过本方法可以导出.csv的原始数据文件，下面介绍导出.xlsx格式的文件

2.转化json数据到Excel

（1）首先安装依赖，在终端输入命令：

npm install -S file-saver xlsx

npm install -D script-loader

（2）在项目src下新建一个文件夹vendor，在此文件夹下放置两个文件Blob.js和Export2Excal.js

链接: https://pan.baidu.com/s/1m6d-aOff2fX4WB7mXxXDZQ 密码: ypb5

（3）export函数

 export() {　
        　　require.ensure([], () => {　　　　　　　　
            const { export_json_to_excel } = require('@/vendor/Export2Excel.js');　　//引入文件　　　　　　
            const tHeader = [ '编码', '名称', ]; //表头
            const filterVal = ['ID', 'Name',;//table表格中对应的属性名　　　　　
            const data = this.formatJson(filterVal, this.positionData);　//表格绑定数据positionData转json　　　　　　　
            export_json_to_excel(tHeader, data, 'position');
            })
 
        },
         formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]))
         },

注意：require('@/vendor/Export2Excel.js');路径以webpack.base.config.js中alias的声明为准