Vue实现表格数据导出Excel-优快云博客

本文链接：https://blog.youkuaiyun.com/vq_qiqi/article/details/116273790

这篇博客介绍了如何在Vue项目中实现表格数据的导出功能。首先，需要安装相关依赖，并新建一个名为Excel的文件夹。接着，从提供的链接下载并解压Excel.zip文件，将其中的export2Excel.js和Blob.js文件放入项目src/Excel文件夹。最后，通过在模板中添加按钮和点击事件，结合methods中的导出方法，实现Excel导出功能。

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

导出所有数据，格式为Excel

安装依赖

 npm install -S file-saver
 npm install -S xlsx
 npm install -D script-loader

新建文件夹

下载文件
链接地址：https://pan.baidu.com/s/1uxR82TzNnuo2C60k7uglyg
提取码：32jh
或者登上183百度网盘找到Excel.zip 下载。里面文件有
在项目的src文件中见一个名为Excel的文件夹
Excel.zip下载后解压，将文件放置 src的Excel文件夹中export2Excel.js和Blob.js两个JS文件

调用

加入按钮与点击事件

<el-button icon="el-icon-download" @click="handleExcel">导出</el-button>

在methods中添加方法

handleExcel() {
	this.excelData = this.tableData; // this.tableData替换成页面表格的数据列表
	this.export2Excel(); //调用export2Excel函数，
},
//表格数据写入excel
export2Excel() {
	var that = this;
	require.ensure([], () => {
		const {export_json_to_excel,} = require("@/views/excel/Export2Excel");
		//这里使用绝对路径( @表示src文件夹 )，使用@/+存放export2Excel的路径；也可以写相对路径
        const tHeader = [
		"序号","提案编号","提案名称","类型","日期","提案人","案件环节","状态","国家","课题"]; 
        // 导出的excel表头名信息，一般都是表格的表头文字
       	const filterVal = [
        "id","project_sn","project_name","project_type","project_date","project_person",
        "project_department","project_link","project_status","project_city","project_subject"]; 
        // 导出的excel表头字段名，这个必须和数据表格的字段一致
       	const list = that.excelData;
       	const data = that.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "专利提案信息"); //导出的表格名称，自己命名
	});
},
//格式转换，直接复制即可,不需要修改什么
formatJson(filterVal, jsonData) {
	return jsonData.map((v) => filterVal.map((j) => v[j]));
},