vue 前端导出Excel表格（基础版 + 多级标题）纯前端导出

最新推荐文章于 2026-05-10 14:02:13 发布

原创

最新推荐文章于 2026-05-10 14:02:13 发布 · 8.2k 阅读

标签

#前端 #vue.js #excel

先看效果

纯前端基础导出的Excel表格

纯前端多级表头导出的Excel表格

基础导出下面赋源代码

1、安装依赖

npm install vue-json-excel

2、在项目的入口 main.js 引入

import JsonExcel from 'vue-json-excel'// 引入导出Excel
Vue.component('downloadExcel', JsonExcel)

3、直接使用

<!--
	:data="tableData" // 要导出的数据   :fields="json_fields" // 导出数据的配置
	:header="title" // 导出的标题       name="订单.xls" // 导出的表格名字及格式
-->
<download-excel style="margin-right: 10px;" class="export-excel-wrapper" :data="tableData" :fields="json_fields" :header="title" name="订单.xls">
	<el-button >导 出</el-button>
</download-excel>	



<------------------------------------分割---------------------------------------->
配置项
json_fields: { // 导出对应表格头部以及数据
	"id":'id',
	"名字":'name',
	"颜色":'amount1',
	"字段1":'amount2',
	"字段2":'amount3',
},

4、完整代码直接复制即可

<template>
	<div>
		<!--
			:data="tableData" // 要导出的数据
			:fields="json_fields" // 导出数据的配置
			:header="title" // 导出的标题
			name="订单.xls" // 导出的表格名字及格式
		-->
		<download-excel style="margin-right: 10px;" class="export-excel-wrapper" :data="tableData" :fields="json_fields" :header="title" name="订单.xls">
			<el-button >导 出</el-button>
		</download-excel>	

		<el-table :data="tableData" border height="200" style="width: 100%; margin-top: 20px">
			<el-table-column prop="id" label="ID" width="180"></el-table-column>
			<el-table-column prop="name" label="姓名"></el-table-column>
			<el-table-column prop="amount1" label="数值 1（元）"></el-table-column>
			<el-table-column prop="amount2" label="数值 2（元）"></el-table-column>
			<el-table-column prop="amount3" label="数值 3（元）"></el-table-column>
		</el-table>
	</div>

</template>

<script>
export default {
	data() {
		return {
			title: "标题",// 
			json_fields: { // 导出对应表格头部以及数据
			    "id":'id',
				"名字":'name',
				"颜色":'amount1',
				"字段1":'amount2',
				"字段2":'amount3',
			},
			tableData: [
				{
					id: '12987122',
					name: '王小虎',
					amount1: '234',