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

最新推荐文章于 2024-04-22 15:36:45 发布
最新推荐文章于 2024-04-22 15:36:45 发布
阅读量6.8k 收藏 49
点赞数 7
分类专栏： vue element 文章标签： 前端 vue.js excel
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56718509/article/details/128703926
版权

先看效果

 

纯前端基础导出的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',
					amount2: '3.2',
					amount3: 10
				},
				{
					id: '12987123',
					name: '王小虎',
					amount1: '165',
					amount2: '4.43',
					amount3: 12
				},
				{
					id: '12987124',
					name: '王小虎',
					amount1: '324',
					amount2: '1.9',
					amount3: 9
				},
				{
					id: '12987125',
					name: '王小虎',
					amount1: '621',
					amount2: '2.2',
					amount3: 17
				},
				{
					id: '12987126',
					name: '王小虎',
					amount1: '539',
					amount2: '4.1',
					amount3: 15
				}
			]
		};
	},
	methods: {}
};
</script>

<style></style>

<------------------------------------分割-------------------------------------------->

多级表头导出

1、还是npm下载依赖

npm install --save xlsx file-saver

2、要新建一个文件，Export2Excel.js 文件，我是从某个网址下载的，我给忘了，这里我直接复制过来,在src目录下创建文件夹vendor，然后创建Export2Excel.js文件

/* eslint-disable */
import {
	saveAs
} from 'file-saver'
import XLSX from 'xlsx'

function generateArray(table) {
	var out = [];
	var rows = table.querySelectorAll('tr');
	var ranges = [];
	for (var R = 0; R < rows.length; ++R) {
		var outRow = [];
		var row = rows[R];
		var columns = row.querySelectorAll('td');
		for (var C = 0; C < columns.length; ++C) {
			var cell = columns[C];
			var colspan = cell.getAttribute('colspan');
			var rowspan = cell.getAttribute('rowspan');
			var cellValue = cell.innerText;
			if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;

			//Skip ranges
			ranges.forEach(function(range) {
				if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e
					.c) {
					for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
				}
			});

			//Handle Row Span
			if (rowspan || colspan) {
				rowspan = rowspan || 1;
				colspan = colspan || 1;
				ranges.push({
					s: {
						r: R,
						c: outRow.length
					},
					e: {
						r: R + rowspan - 1,
						c: outRow.length + colspan - 1
					}
				});
			};

			//Handle Value
			outRow.push(cellValue !== "" ? cellValue : null);

			//Handle Colspan
			if (colspan)
				for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
		}
		out.push(outRow);
	}
	return [out, ranges];
};

function datenum(v, date1904) {
	if (date1904) v += 1462;
	var epoch = Date.parse(v);
	return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}

function sheet_from_array_of_arrays(data, opts) {
	var ws = {};
	var range = {
		s: {
			c: 10000000,
			r: 10000000
		},
		e: {
			c: 0,
			r: 0
		}
	};
	for (var R = 0; R != data.length; ++R) {
		for (var C = 0; C != data[R].length; ++C) {
			if (range.s.r > R) range.s.r = R;
			if (range.s.c > C) range.s.c = C;
			if (range.e.r < R) range.e.r = R;
			if (range.e.c < C) range.e.c = C;
			var cell = {
				v: data[R][C]
			};
			if (cell.v == null) continue;
			var cell_ref = XLSX.utils.encode_cell({
				c: C,
				r: R
			});

			if (typeof cell.v === 'number') cell.t = 'n';
			else if (typeof cell.v === 'boolean') cell.t = 'b';
			else if (cell.v instanceof Date) {
				cell.t = 'n';
				cell.z = XLSX.SSF._table[14];
				cell.v = datenum(cell.v);
			} else cell.t = 's';

			ws[cell_ref] = cell;
		}
	}
	if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
	return ws;
}

function Workbook() {
	if (!(this instanceof Workbook)) return new Workbook();
	this.SheetNames = [];
	this.Sheets = {};
}

function s2ab(s) {
	var buf = new ArrayBuffer(s.length);
	var view = new Uint8Array(buf);
	for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
	return buf;
}

export function export_table_to_excel(id) {
	var theTable = document.getElementById(id);
	var oo = generateArray(theTable);
	var ranges = oo[1];

	/* original data */
	var data = oo[0];
	var ws_name = "SheetJS";

	var wb = new Workbook(),
		ws = sheet_from_array_of_arrays(data);

	/* add ranges to worksheet */
	// ws['!cols'] = ['apple', 'banan'];
	ws['!merges'] = ranges;

	/* add worksheet to workbook */
	wb.SheetNames.push(ws_name);
	wb.Sheets[ws_name] = ws;

	var wbout = XLSX.write(wb, {
		bookType: 'xlsx',
		bookSST: false,
		type: 'binary'
	});

	saveAs(new Blob([s2ab(wbout)], {
		type: "application/octet-stream"
	}), "test.xlsx")
}

export function export_json_to_excel({
	multiHeader = [],
	header,
	data,
	filename,
	merges = [],
	autoWidth = true,
	bookType = 'xlsx'
} = {}) {
	/* original data */
	filename = filename || 'excel-list'
	data = [...data]
	data.unshift(header);

	for (let i = multiHeader.length - 1; i > -1; i--) {
		data.unshift(multiHeader[i])
	}

	var ws_name = "SheetJS";
	var wb = new Workbook(),
		ws = sheet_from_array_of_arrays(data);

	if (merges.length > 0) {
		if (!ws['!merges']) ws['!merges'] = [];
		merges.forEach(item => {
			ws['!merges'].push(XLSX.utils.decode_range(item))
		})
	}

	if (autoWidth) {
		/*设置worksheet每列的最大宽度*/
		const colWidth = data.map(row => row.map(val => {
			/*先判断是否为null/undefined*/
			if (val == null) {
				return {
					'wch': 10
				};
			}
			/*再判断是否为中文*/
			else if (val.toString().charCodeAt(0) > 255) {
				return {
					'wch': val.toString().length * 2
				};
			} else {
				return {
					'wch': val.toString().length
				};
			}
		}))
		/*以第一行为初始值*/
		let result = colWidth[0];
		for (let i = 1; i < colWidth.length; i++) {
			for (let j = 0; j < colWidth[i].length; j++) {
				if (result[j]['wch'] < colWidth[i][j]['wch']) {
					result[j]['wch'] = colWidth[i][j]['wch'];
				}
			}
		}
		ws['!cols'] = result;
	}

	/* add worksheet to workbook */
	wb.SheetNames.push(ws_name);
	wb.Sheets[ws_name] = ws;

	var wbout = XLSX.write(wb, {
		bookType: bookType,
		bookSST: false,
		type: 'binary'
	});
	saveAs(new Blob([s2ab(wbout)], {
		type: "application/octet-stream"
	}), `${filename}.${bookType}`);
}

3、直接导出，看注释

<div style="padding: 20px 0;"><el-button size="small" type="primary" @click="handleDownload">导出EXCEl</el-button></div>
<!-- 这里是按钮 -->

// 下面是对应的方法
handleDownload1() {  // 手写导出导出
	import('@/vendor/Export2Excel').then(excel => {
		const multiHeader = [['物料信息', '', '', '', '', '', '', '上月库存', '', '','本月入库', '', '', '本月出库','', '', '本月库存', '', '']];// 这里是第一级的标题,合并的格子一定要用空写出来不能直接不写
		const header =['物料名称', '类型', '规格', '颜色', '厚度', '计量单位', '品牌', '单价', '数量', '金额','单价', '数量', '金额','单价', '数量', '金额','单价', '数量', '金额',] //第二行; // 最后一行的表头数据
		const filterVal = ['name', 'type', 'specification', 'color', 'thicknes', 'measuring_unit','brand','shang_cash','shang_inventory_num','shangyue_money',
		'brdanjia', 'brsum', 'brmoney',  'bcdanjia', 'bcsum', 'bcmoney',  'bdanjia', 'bsum', 'bmoney'];//这里代表字段与上面的对应起来
		this.tableData.forEach(item=>{// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!这里不用管我,我这里由于业务需要 修改了一下
			item.brdanjia = item.benyueruku.danjia
			item.brsum = item.benyueruku.sum
			item.brmoney = item.benyueruku.money
			item.bcdanjia = item.benyuechuku.danjia
			item.bcsum = item.benyuechuku.sum
			item.bcmoney = item.benyuechuku.money
			item.bdanjia = item.benyuekucun.danjia
			item.bsum =	item.benyuekucun.sum
			item.bmoney = item.benyuekucun.money
		})
		const list = this.tableData;// 数据  这里对应上面我修改好的数据
		const data = this.formatJson(filterVal, list);// 不用改
		const merges = ['A1:G1', 'H1:J1', 'K1:M1', 'N1:P1', 'Q1:S1']; // 合并单元格的数据，对应一级表头要合并的格子,可以自己打开Excel表格看看要合并的格子写上对应的字母
		const filename = '导出'
		excel.export_json_to_excel({
			multiHeader,
			header,
			merges,
			data,
			filename
		});
	});
},
formatJson(filterVal, jsonData) {
	return jsonData.map(v =>
		filterVal.map(j => {
			return v[j];
		})
	);
},

4、源代码  直接复制就行 小例子

<template>
	<div style="padding: 20px;">
		<div style="padding: 20px 0;"><el-button size="small" type="primary" @click="handleDownload">导出EXCEl</el-button></div>
		<el-table class="center-table" :data="tableData" size="small">
			<el-table-column prop="date" label="日期" width="150" />
			<el-table-column label="配送信息">
				<el-table-column prop="name" label="姓名" width="120" />
				<el-table-column label="地址">
					<el-table-column prop="province" label="省份" width="120" />
					<el-table-column prop="city" label="市区" width="120" />
					<el-table-column prop="address" label="地址" />
					<el-table-column prop="zip" label="邮编" width="120" />
				</el-table-column>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
export default {
	name: 'MergeHeader',
	data() {
		return {
			tableData: [
				{
					date: '2016-05-03',
					name: '王小虎',
					province: '上海',
					city: '普陀区',
					address: '上海市普陀区金沙江路 1518 弄',
					zip: 200333
				},
				{
					date: '2016-05-02',
					name: '王小虎',
					province: '上海',
					city: '普陀区',
					address: '上海市普陀区金沙江路 1518 弄',
					zip: 200333
				},
				{
					date: '2016-05-04',
					name: '王小虎',
					province: '上海',
					city: '普陀区',
					address: '上海市普陀区金沙江路 1518 弄',
					zip: 200333
				},
				{
					date: '2016-05-01',
					name: '王小虎',
					province: '上海',
					city: '普陀区',
					address: '上海市普陀区金沙江路 1518 弄',
					zip: 200333
				},
				{
					date: '2016-05-08',
					name: '王小虎',
					province: '上海',
					city: '普陀区',
					address: '上海市普陀区金沙江路 1518 弄',
					zip: 200333
				},
				{
					date: '2016-05-06',
					name: '王小虎',
					province: '上海',
					city: '普陀区',
					address: '上海市普陀区金沙江路 1518 弄',
					zip: 200333
				},
				{
					date: '2016-05-07',
					name: '王小虎',
					province: '上海',
					city: '普陀区',
					address: '上海市普陀区金沙江路 1518 弄',
					zip: 200333
				}
			]
		};
	},

	methods: {
		handleDownload() {
			import('@/vendor/Export2Excel').then(excel => {
				const multiHeader = [
					['日期', '配送信息', '', '', '', ''], //第一行
					['', '姓名', '地址', '', '', ''] //第二行
				]; // 前两行的表头数据，二维数组，不够的用空白补全
				const header = ['', '', '省份', '市区', '地址', '邮编']; // 最后一行的表头数据
				const filterVal = ['date', 'name', 'province', 'city', 'address', 'zip'];
				const list = this.tableData;
				const data = this.formatJson(filterVal, list);
				const merges = ['A1:A3', 'B1:F1', 'B2:B3', 'C2:F2']; // 合并单元格的数据，
				excel.export_json_to_excel({
					multiHeader,
					header,
					merges,
					data
				});
			});
		},
		formatJson(filterVal, jsonData) {
			return jsonData.map(v =>
				filterVal.map(j => {
					return v[j];
				})
			);
		}
	}
};
</script>
<style>
.center-table td,
.center-table th {
	text-align: center;
}
</style>

卑信－吾天
关注
  • 7
    点赞
  • 踩
  • 49
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
专栏目录
vue导出excel并修改表头样式
10-29
vue导出excel并修改表头样式(请先阅读readme） 安装npm install 执行npm run serve
Vue表格导出Excel数据（支持多级表头）
2201_75870706的博客
08-03 1113
Vue表格导出Excel数据,同时解决导出数据重复问题
纯前端实现自定义数据下载成表格
weixin_46769087的博客
04-12 1587
纯前端实现文件下载
vue实现导出excel的多种方式
蓝易云
02-27 570
另外一种方式是使用后端接口来生成Excel文件。你可以在Vue组件中发送一个请求到后端接口，然后后端接口返回一个Excel文件的URL，你就可以使用这个URL来下载Excel文件。在这个例子中，'/api/export-excel'是后端接口的URL，这个接口应该返回一个包含Excel文件URL的JSON对象。以上两种方式都可以实现在Vue中导出Excel的功能，你可以根据你的需求选择合适的方式。
VUE+element+其他插件，导出功能的简单实现,
测试领域专家，多领域测试技术、管理、工具都略懂，略懂一二
04-26 4092
我们的导出excle，今天来推荐使用一个插件vue-json-excel， 参考：https://blog.csdn.net/junkaicool/article/details/96423061 第一步：先下载 npm install vue-json-excel -S 第二步：导入 import JsonExcel from 'vue-json-excel'; 第三步：添加组件 <--导出事件--> <download-excel class="blueBt
device-vue-front:设备管理系统前端
03-13
设备管理系统 简介 本项目是基于二次开发的设备管理系统。根据学校实验室的设备管理需求订制而成。 功能 - 登录 / 注销 - 权限验证 - 页面权限 - 指令权限 - 权限配置 - 二步登录 - 多环境发布 - dev - sit - stage - prod - 全局功能 - 国际化多语言 - 多种动态换肤 - 动态侧边栏（支持多级路由嵌套） - 动态面包屑 - 快捷导航(标签页) - Svg Sprite 图标 - 本地/后端 mock 数据 - Screenfull全屏 - 自适应收缩侧边栏 - 编辑器 - 富文本 - Markdown - JSON 等多格式 - Excel - 导出excel - 导入excel - 前端可视化excel - 导出zip - 表格 - 动态表格
HTML表格生成Excel文件代码(纯前端)
02-15
HTML表格生成Excel文件代码 纯前端 demo 可以做参考~~
vue导出excel表格（详细教程）
热门推荐
m0_59023970的博客
03-11 5万+
在开发的时候，会经常用的导出excel表格功能,刚好自己开发有遇到，就记录一下 一、安装vue-json-excel npm install vue-json-excel -S 二、main.js中引入 import JsonExcel from 'vue-json-excel' Vue.component('downloadExcel', JsonExcel) 三、在代码中使用 <template>
vue项目导出Excel表格
weixin_43638890的博客
10-30 5442
vue项目导出Excel表格
vue 下载Excel 文件
weixin_46531845的博客
04-13 4252
vue 下载Excel 文件 vue-json-excel 1.安装 npm install vue-json-excel -S 2.引入 在mian.js中 //引入 导出Excel vue-json-excel import JsonExcel from "vue-json-excel"; Vue.component("downloadExcel", JsonExcel); 3.构建外部-公共组件 downloadExcel 通过传值的方式，传入参数。参考父子组件传值 <te
Vue前端表格导出Excel文件
m0_59420288的博客
01-30 3465
分享一个Vue前端导出Excel文件的方法。记录学习！
vue+element-ui动态生成多级表头的方法
10-18
今天小编就为大家分享一篇vue+element-ui动态生成多级表头的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中导出Excel表格的实现代码
10-17
项目中我们可能会碰到导出Excel文件的需求，这篇文章主要介绍了vue中导出Excel表格的实现代码，非常具有实用价值，需要的朋友可以参考下
vue表格实现固定表头首列
11-02
vue移动端项目 一个可以固定表头首列的表格 ，没有使用UI插件。 感兴趣的朋友可以参考下，希望对大家有所帮助
复杂多表头excel表格的导出及布局，支持拓展
02-22
1.用于多种业务的复杂多表头表格 2.可支持任意拓展表头后导出 3.简单易懂
basicProject:vue+element+axios+lodash 封装的基础应用
04-07
功能 - 登录 / 注销 - 权限验证 - 页面权限 - 指令权限 - 权限配置 - 二步登录 ... - 前端可视化excel - 导出zip - 表格 - 动态表格 - 拖拽表格 - 内联编辑 - 错误页面 - 401 - 404 - 組件 -
JEECG表格选中状态怎么去掉
weixin_39031037的博客
04-19 350
官网代码（在取消选中状态的时候不生效）
【前端】数组的常用处理函数
最新发布
lcukyNwa的博客
04-22 117
item------->每个元素值 (必)index----->索引（可选）arr-------- >当前数组（可选）推荐vscode的一款插件来写以下的demo，该插件可以直接在js文件中显示结果，搜 Quokka.js用这个插件去新建一个js文件，直接就运行在node上了forEach不会返回一个新的数组，里面改值会影响原数组，其他方法不影响原数组map可以返回新数组 用于映射，如每个元素都加倍或执行其他转换操作every返回一布尔值，需数组中全部满足。
Storage 工具如何封装(前缀、加密、过期时间等)及localStorage的基础介绍
qq_43641110的博客
04-18 952
​​​​​​​。
vue前端导出excel表格功能
06-10
在 Vue 前端实现导出 Excel 表格功能，一般有如下几个步骤： 1. 安装依赖库 在 Vue 项目中使用 `xlsx` 库，可以通过 npm 进行安装： ``` npm install xlsx --save ``` 2. 实现导出方法 在 Vue 组件中，实现导出 Excel 表格的方法，例如： ```javascript import XLSX from 'xlsx' export default { methods: { exportExcel() { // 准备数据 const data = [ ['姓名', '年龄', '性别'], ['张三', 18, '男'], ['李四', 20, '女'], ['王五', 22, '男'] ] // 创建 workbook 对象 const sheet = XLSX.utils.aoa_to_sheet(data) const workbook = XLSX.utils.book_new() XLSX.utils.book_append_sheet(workbook, sheet, 'Sheet1') // 导出 Excel 表格 XLSX.writeFile(workbook, 'example.xlsx') } } } ``` 在上述代码中，首先使用 `XLSX.utils.aoa_to_sheet` 方法将数据转换为 worksheet 对象，然后使用 `XLSX.utils.book_new` 方法创建 workbook 对象，并将 worksheet 对象添加到 workbook 中，最后使用 `XLSX.writeFile` 方法导出 Excel 表格。 3. 触发导出事件 在 Vue 组件中，将导出方法与按钮等元素进行绑定，例如： ```html <template> <div> <button @click="exportExcel">导出 Excel</button> </div> </template> ``` 点击按钮即可触发导出事件，生成 Excel 表格。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值