xlsxStyle + xlsx.full.min 导出数据，并设置导出样式

已于 2022-11-08 09:52:40 修改
阅读量1k 收藏 2
点赞数
分类专栏： js 文章标签： javascript 前端 java
于 2022-11-08 09:50:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25919495/article/details/127744742
版权 
<!DOCTYPE html>
<html>

<head>
	<title>SheetJS JS-XLSX</title>
	<meta charset="utf-8" />
</head>

<body>
	<script type="text/javascript" src="./xlsx.full.min.js"></script>
	<script type="text/javascript" src="./xlsxStyle.core.min.js"></script>
	<script type="text/javascript" src="./xlsxStyle.utils.js"></script>
	<script>

		function saveAs(obj, fileName) {
			var tmpA = document.createElement("a");
			tmpA.download = fileName || "下载";
			tmpA.href = URL.createObjectURL(obj);
			tmpA.click();
			setTimeout(function () {
				URL.revokeObjectURL(obj);
			}, 50);
		};

		const serveHead = [
			{
				'startTime': '报警开始时间'
			},
			{
				'endTime': '报警结束时间'
			},
			{
				'eventLevel': '报警等级'
			},
			{
				'mmsi': 'MMSI'
			},
			{
				'name': '船名'
			},
			{
				'alarmTime': '报警时间'
			},
			{
				'nearestCable': '海域'
			},
			{
				'sog': '船速(节)'
			},

			{
				'minDistance': '距离(米)'
			},
			{
				'alarmDescription': '描述'
			}
		];

		const serveData = [
			{
				"mmsi": 413770025,
				"name": "WANXUANCHENGHUO0859",
				"startTime": "2022-11-05 11:54:15",
				"endTime": "2022-11-05 12:00:15",
				"eventLevel": "预警",
				"details": [
					{
						"startTime": "2022-11-05 11:54:15",
						"endTime": "2022-11-05 12:00:15",
						"eventLevel": "预警",
						"eventType": null,
						"mmsi": 413770025,
						"name": "WANXUANCHENGHUO0859",
						"nearestCable": null,
						"alarmDescription": null,
						"sog": null,
						"cog": null,
						"minDistance": null,
						"lon": null,
						"lat": null,
						"alarmTime": "2022-11-05 11:54:15",
						"beginTime": null,
						"finishTime": null,
						"reportTime": null,
						"groupByStr": "413770025_2022-11-05 11:54:15_2022-11-05 12:00:15_预警_WANXUANCHENGHUO0859"
					},
					{
						"startTime": "2022-11-05 11:54:15",
						"endTime": "2022-11-05 12:00:15",
						"eventLevel": "预警",
						"eventType": null,
						"mmsi": 413770025,
						"name": "WANXUANCHENGHUO0859",
						"nearestCable": null,
						"alarmDescription": null,
						"sog": null,
						"cog": null,
						"minDistance": null,
						"lon": null,
						"lat": null,
						"alarmTime": "2022-11-05 12:00:15",
						"beginTime": null,
						"finishTime": null,
						"reportTime": null,
						"groupByStr": "413770025_2022-11-05 11:54:15_2022-11-05 12:00:15_预警_WANXUANCHENGHUO0859"
					}
				]
			},
			{
				"mmsi": 413989743,
				"name": "LUZAOZHUANGHUO2216",
				"startTime": "2022-11-05 09:32:41",
				"endTime": "2022-11-05 09:41:41",
				"eventLevel": "预警",
				"details": [
					{
						"startTime": "2022-11-05 09:32:41",
						"endTime": "2022-11-05 09:41:41",
						"eventLevel": "预警",
						"eventType": null,
						"mmsi": 413989743,
						"name": "LUZAOZHUANGHUO2216",
						"nearestCable": null,
						"alarmDescription": null,
						"sog": null,
						"cog": null,
						"minDistance": null,
						"lon": null,
						"lat": null,
						"alarmTime": "2022-11-05 09:38:41",
						"beginTime": null,
						"finishTime": null,
						"reportTime": null,
						"groupByStr": "413989743_2022-11-05 09:32:41_2022-11-05 09:41:41_预警_LUZAOZHUANGHUO2216"
					},
					{
						"startTime": "2022-11-05 09:32:41",
						"endTime": "2022-11-05 09:41:41",
						"eventLevel": "预警",
						"eventType": null,
						"mmsi": 413989743,
						"name": "LUZAOZHUANGHUO2216",
						"nearestCable": null,
						"alarmDescription": null,
						"sog": null,
						"cog": null,
						"minDistance": null,
						"lon": null,
						"lat": null,
						"alarmTime": "2022-11-05 09:41:41",
						"beginTime": null,
						"finishTime": null,
						"reportTime": null,
						"groupByStr": "413989743_2022-11-05 09:32:41_2022-11-05 09:41:41_预警_LUZAOZHUANGHUO2216"
					},
					{
						"startTime": "2022-11-05 09:32:41",
						"endTime": "2022-11-05 09:41:41",
						"eventLevel": "预警",
						"eventType": null,
						"mmsi": 413989743,
						"name": "LUZAOZHUANGHUO2216",
						"nearestCable": null,
						"alarmDescription": null,
						"sog": null,
						"cog": null,
						"minDistance": null,
						"lon": null,
						"lat": null,
						"alarmTime": "2022-11-05 09:35:41",
						"beginTime": null,
						"finishTime": null,
						"reportTime": null,
						"groupByStr": "413989743_2022-11-05 09:32:41_2022-11-05 09:41:41_预警_LUZAOZHUANGHUO2216"
					},
					{
						"startTime": "2022-11-05 09:32:41",
						"endTime": "2022-11-05 09:41:41",
						"eventLevel": "预警",
						"eventType": null,
						"mmsi": 413989743,
						"name": "LUZAOZHUANGHUO2216",
						"nearestCable": null,
						"alarmDescription": null,
						"sog": null,
						"cog": null,
						"minDistance": null,
						"lon": null,
						"lat": null,
						"alarmTime": "2022-11-05 09:32:41",
						"beginTime": null,
						"finishTime": null,
						"reportTime": null,
						"groupByStr": "413989743_2022-11-05 09:32:41_2022-11-05 09:41:41_预警_LUZAOZHUANGHUO2216"
					}
				]
			},
			{
				"mmsi": 413865686,
				"name": "未知",
				"startTime": "2022-11-05 11:09:46",
				"endTime": "2022-11-05 11:09:46",
				"eventLevel": "预警",
				"details": [
					{
						"startTime": "2022-11-05 11:09:46",
						"endTime": "2022-11-05 11:09:46",
						"eventLevel": "预警",
						"eventType": null,
						"mmsi": 413865686,
						"name": "未知",
						"nearestCable": null,
						"alarmDescription": null,
						"sog": null,
						"cog": null,
						"minDistance": null,
						"lon": null,
						"lat": null,
						"alarmTime": "2022-11-05 11:09:46",
						"beginTime": null,
						"finishTime": null,
						"reportTime": null,
						"groupByStr": "413865686_2022-11-05 11:09:46_2022-11-05 11:09:46_预警_未知"
					},
					{
						"startTime": "2022-11-05 11:09:46",
						"endTime": "2022-11-05 11:09:46",
						"eventLevel": "预警",
						"eventType": null,
						"mmsi": 413865686,
						"name": "未知",
						"nearestCable": null,
						"alarmDescription": null,
						"sog": null,
						"cog": null,
						"minDistance": null,
						"lon": null,
						"lat": null,
						"alarmTime": "2022-11-05 11:09:46",
						"beginTime": null,
						"finishTime": null,
						"reportTime": null,
						"groupByStr": "413865686_2022-11-05 11:09:46_2022-11-05 11:09:46_预警_未知"
					}
				]
			},
			{
				"mmsi": 413996871,
				"name": "未知",
				"startTime": "2022-11-05 09:21:16",
				"endTime": "2022-11-05 09:28:55",
				"eventLevel": "预警",
				"details": [
					{
						"startTime": "2022-11-05 09:21:16",
						"endTime": "2022-11-05 09:28:55",
						"eventLevel": "预警",
						"eventType": null,
						"mmsi": 413996871,
						"name": "未知",
						"nearestCable": null,
						"alarmDescription": null,
						"sog": null,
						"cog": null,
						"minDistance": null,
						"lon": null,
						"lat": null,
						"alarmTime": "2022-11-05 09:24:05",
						"beginTime": null,
						"finishTime": null,
						"reportTime": null,
						"groupByStr": "413996871_2022-11-05 09:21:16_2022-11-05 09:28:55_预警_未知"
					},
					{
						"startTime": "2022-11-05 09:21:16",
						"endTime": "2022-11-05 09:28:55",
						"eventLevel": "预警",
						"eventType": null,
						"mmsi": 413996871,
						"name": "未知",
						"nearestCable": null,
						"alarmDescription": null,
						"sog": null,
						"cog": null,
						"minDistance": null,
						"lon": null,
						"lat": null,
						"alarmTime": "2022-11-05 09:28:55",
						"beginTime": null,
						"finishTime": null,
						"reportTime": null,
						"groupByStr": "413996871_2022-11-05 09:21:16_2022-11-05 09:28:55_预警_未知"
					},
					{
						"startTime": "2022-11-05 09:21:16",
						"endTime": "2022-11-05 09:28:55",
						"eventLevel": "预警",
						"eventType": null,
						"mmsi": 413996871,
						"name": "未知",
						"nearestCable": null,
						"alarmDescription": null,
						"sog": null,
						"cog": null,
						"minDistance": null,
						"lon": null,
						"lat": null,
						"alarmTime": "2022-11-05 09:27:19",
						"beginTime": null,
						"finishTime": null,
						"reportTime": null,
						"groupByStr": "413996871_2022-11-05 09:21:16_2022-11-05 09:28:55_预警_未知"
					},
					{
						"startTime": "2022-11-05 09:21:16",
						"endTime": "2022-11-05 09:28:55",
						"eventLevel": "预警",
						"eventType": null,
						"mmsi": 413996871,
						"name": "未知",
						"nearestCable": null,
						"alarmDescription": null,
						"sog": null,
						"cog": null,
						"minDistance": null,
						"lon": null,
						"lat": null,
						"alarmTime": "2022-11-05 09:25:17",
						"beginTime": null,
						"finishTime": null,
						"reportTime": null,
						"groupByStr": "413996871_2022-11-05 09:21:16_2022-11-05 09:28:55_预警_未知"
					},
					{
						"startTime": "2022-11-05 09:21:16",
						"endTime": "2022-11-05 09:28:55",
						"eventLevel": "预警",
						"eventType": null,
						"mmsi": 413996871,
						"name": "未知",
						"nearestCable": null,
						"alarmDescription": null,
						"sog": null,
						"cog": null,
						"minDistance": null,
						"lon": null,
						"lat": null,
						"alarmTime": "2022-11-05 09:26:17",
						"beginTime": null,
						"finishTime": null,
						"reportTime": null,
						"groupByStr": "413996871_2022-11-05 09:21:16_2022-11-05 09:28:55_预警_未知"
					},
					{
						"startTime": "2022-11-05 09:21:16",
						"endTime": "2022-11-05 09:28:55",
						"eventLevel": "预警",
						"eventType": null,
						"mmsi": 413996871,
						"name": "未知",
						"nearestCable": null,
						"alarmDescription": null,
						"sog": null,
						"cog": null,
						"minDistance": null,
						"lon": null,
						"lat": null,
						"alarmTime": "2022-11-05 09:26:47",
						"beginTime": null,
						"finishTime": null,
						"reportTime": null,
						"groupByStr": "413996871_2022-11-05 09:21:16_2022-11-05 09:28:55_预警_未知"
					},
					{
						"startTime": "2022-11-05 09:21:16",
						"endTime": "2022-11-05 09:28:55",
						"eventLevel": "预警",
						"eventType": null,
						"mmsi": 413996871,
						"name": "未知",
						"nearestCable": null,
						"alarmDescription": null,
						"sog": null,
						"cog": null,
						"minDistance": null,
						"lon": null,
						"lat": null,
						"alarmTime": "2022-11-05 09:24:45",
						"beginTime": null,
						"finishTime": null,
						"reportTime": null,
						"groupByStr": "413996871_2022-11-05 09:21:16_2022-11-05 09:28:55_预警_未知"
					},
					{
						"startTime": "2022-11-05 09:21:16",
						"endTime": "2022-11-05 09:28:55",
						"eventLevel": "预警",
						"eventType": null,
						"mmsi": 413996871,
						"name": "未知",
						"nearestCable": null,
						"alarmDescription": null,
						"sog": null,
						"cog": null,
						"minDistance": null,
						"lon": null,
						"lat": null,
						"alarmTime": "2022-11-05 09:21:16",
						"beginTime": null,
						"finishTime": null,
						"reportTime": null,
						"groupByStr": "413996871_2022-11-05 09:21:16_2022-11-05 09:28:55_预警_未知"
					},
					{
						"startTime": "2022-11-05 09:21:16",
						"endTime": "2022-11-05 09:28:55",
						"eventLevel": "预警",
						"eventType": null,
						"mmsi": 413996871,
						"name": "未知",
						"nearestCable": null,
						"alarmDescription": null,
						"sog": null,
						"cog": null,
						"minDistance": null,
						"lon": null,
						"lat": null,
						"alarmTime": "2022-11-05 09:25:47",
						"beginTime": null,
						"finishTime": null,
						"reportTime": null,
						"groupByStr": "413996871_2022-11-05 09:21:16_2022-11-05 09:28:55_预警_未知"
					},
					{
						"startTime": "2022-11-05 09:21:16",
						"endTime": "2022-11-05 09:28:55",
						"eventLevel": "预警",
						"eventType": null,
						"mmsi": 413996871,
						"name": "未知",
						"nearestCable": null,
						"alarmDescription": null,
						"sog": null,
						"cog": null,
						"minDistance": null,
						"lon": null,
						"lat": null,
						"alarmTime": "2022-11-05 09:23:28",
						"beginTime": null,
						"finishTime": null,
						"reportTime": null,
						"groupByStr": "413996871_2022-11-05 09:21:16_2022-11-05 09:28:55_预警_未知"
					},
					{
						"startTime": "2022-11-05 09:21:16",
						"endTime": "2022-11-05 09:28:55",
						"eventLevel": "预警",
						"eventType": null,
						"mmsi": 413996871,
						"name": "未知",
						"nearestCable": null,
						"alarmDescription": null,
						"sog": null,
						"cog": null,
						"minDistance": null,
						"lon": null,
						"lat": null,
						"alarmTime": "2022-11-05 09:28:24",
						"beginTime": null,
						"finishTime": null,
						"reportTime": null,
						"groupByStr": "413996871_2022-11-05 09:21:16_2022-11-05 09:28:55_预警_未知"
					},
					{
						"startTime": "2022-11-05 09:21:16",
						"endTime": "2022-11-05 09:28:55",
						"eventLevel": "预警",
						"eventType": null,
						"mmsi": 413996871,
						"name": "未知",
						"nearestCable": null,
						"alarmDescription": null,
						"sog": null,
						"cog": null,
						"minDistance": null,
						"lon": null,
						"lat": null,
						"alarmTime": "2022-11-05 09:21:46",
						"beginTime": null,
						"finishTime": null,
						"reportTime": null,
						"groupByStr": "413996871_2022-11-05 09:21:16_2022-11-05 09:28:55_预警_未知"
					},
					{
						"startTime": "2022-11-05 09:21:16",
						"endTime": "2022-11-05 09:28:55",
						"eventLevel": "预警",
						"eventType": null,
						"mmsi": 413996871,
						"name": "未知",
						"nearestCable": null,
						"alarmDescription": null,
						"sog": null,
						"cog": null,
						"minDistance": null,
						"lon": null,
						"lat": null,
						"alarmTime": "2022-11-05 09:22:53",
						"beginTime": null,
						"finishTime": null,
						"reportTime": null,
						"groupByStr": "413996871_2022-11-05 09:21:16_2022-11-05 09:28:55_预警_未知"
					},
					{
						"startTime": "2022-11-05 09:21:16",
						"endTime": "2022-11-05 09:28:55",
						"eventLevel": "预警",
						"eventType": null,
						"mmsi": 413996871,
						"name": "未知",
						"nearestCable": null,
						"alarmDescription": null,
						"sog": null,
						"cog": null,
						"minDistance": null,
						"lon": null,
						"lat": null,
						"alarmTime": "2022-11-05 09:27:52",
						"beginTime": null,
						"finishTime": null,
						"reportTime": null,
						"groupByStr": "413996871_2022-11-05 09:21:16_2022-11-05 09:28:55_预警_未知"
					},
					{
						"startTime": "2022-11-05 09:21:16",
						"endTime": "2022-11-05 09:28:55",
						"eventLevel": "预警",
						"eventType": null,
						"mmsi": 413996871,
						"name": "未知",
						"nearestCable": null,
						"alarmDescription": null,
						"sog": null,
						"cog": null,
						"minDistance": null,
						"lon": null,
						"lat": null,
						"alarmTime": "2022-11-05 09:22:18",
						"beginTime": null,
						"finishTime": null,
						"reportTime": null,
						"groupByStr": "413996871_2022-11-05 09:21:16_2022-11-05 09:28:55_预警_未知"
					}
				]
			},
			{
				"mmsi": 413842719,
				"name": "WANTIANYU1689",
				"startTime": "2022-11-05 11:18:48",
				"endTime": "2022-11-05 11:18:48",
				"eventLevel": "预警",
				"details": [
					{
						"startTime": "2022-11-05 11:18:48",
						"endTime": "2022-11-05 11:18:48",
						"eventLevel": "预警",
						"eventType": null,
						"mmsi": 413842719,
						"name": "WANTIANYU1689",
						"nearestCable": null,
						"alarmDescription": null,
						"sog": null,
						"cog": null,
						"minDistance": null,
						"lon": null,
						"lat": null,
						"alarmTime": "2022-11-05 11:18:48",
						"beginTime": null,
						"finishTime": null,
						"reportTime": null,
						"groupByStr": "413842719_2022-11-05 11:18:48_2022-11-05 11:18:48_预警_WANTIANYU1689"
					},
					{
						"startTime": "2022-11-05 11:18:48",
						"endTime": "2022-11-05 11:18:48",
						"eventLevel": "预警",
						"eventType": null,
						"mmsi": 413842719,
						"name": "WANTIANYU1689",
						"nearestCable": null,
						"alarmDescription": null,
						"sog": null,
						"cog": null,
						"minDistance": null,
						"lon": null,
						"lat": null,
						"alarmTime": "2022-11-05 11:18:48",
						"beginTime": null,
						"finishTime": null,
						"reportTime": null,
						"groupByStr": "413842719_2022-11-05 11:18:48_2022-11-05 11:18:48_预警_WANTIANYU1689"
					}
				]
			}
		];

		// 数据整理
		let serveTransData = [];
		let merges = []; //合并规律
		let cow = 5; // 前五列合并
		let startRow = 0;
		let endRow = 0;
		serveData.forEach(({ details = [] }) => {
			const mapData = details.map(item => {
				let tempData = {}
				serveHead.forEach(v => {
					const [code, name] = Object.entries(v)[0];
					tempData[name] = item[code];
				});
				return tempData;
			});
			serveTransData.push(...mapData);
			endRow += details.length;
			for (let i = 0; i < cow; i++) {
				merges.push({
					// c => 列  r => 行 
					s: { c: i, r: startRow + 1 }, e: { c: i, r: endRow }
				})
			};
			startRow = endRow;
		});

		function doit(type) {

			var sheetName = 'Sheet1';
			var wb = {
				SheetNames: [sheetName],
				Sheets: {},
				Props: {}
			};
			var data = XLSX.utils.json_to_sheet(serveTransData);

			wb.Sheets[sheetName] = data;

			XSU.mergeCellsByObj(wb, sheetName, merges); 	// merges单元合并规则
			XSU.setAlignmentHorizontalAll(wb, sheetName, 'center');//垂直居中
			XSU.setAlignmentVerticalAll(wb, sheetName, 'center');//水平居中
			XSU.setFontBoldOfRows(wb, sheetName, true, '1');//设置第二行标题行加粗

			//列宽设置 1wch为1英文字符宽度
			var width = new Array(serveHead.length).fill({ wch: 20 });
			XSU.setColWidth(wb, sheetName, width);

			//转换成二进制 使用xlsx-style（XS）进行转换才能得到带样式Excel
			var wBout = xlsxStyle.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' });
			saveAs(new Blob([XSU.s2ab(wBout)]), "test.xlsx");

		}
	</script>
	<input type="submit" value="Export!" onclick="doit();">
</body>

</html>

合并规则      

      data["!merges"] = [

      //   // c => 列

      //   // r => 行

      //   纵向合并，范围是第1列的行1到行2

      //   { s: { c: 1, r: 1 }, e: { c: 1, r: 2 } }, // 纵向合并，范围是第2列的行1到行2

      //   { s: { c: 2, r: 1 }, e: { c: 2, r: 2 } }, // 纵向合并，范围是第3列的行1到行2

      //   { s: { c: 3, r: 1 }, e: { c: 3, r: 2 } }, // 纵向合并，范围是第4列的行1到行2

      //   { s: { c: 4, r: 1 }, e: { c: 4, r: 2 } }, // 纵向合并，范围是第5列的行1到行2

      //   // 第二组

      //   { s: { c: 0, r: 3 }, e: { c: 0, r: 4 } }, // 纵向合并，范围是第1列的行3到行4

      //   { s: { c: 1, r: 3 }, e: { c: 1, r: 4 } }, // 纵向合并，范围是第2列的行3到行4

      //   { s: { c: 2, r: 3 }, e: { c: 2, r: 4 } }, // 纵向合并，范围是第3列的行3到行4

      //   { s: { c: 3, r: 3 }, e: { c: 3, r: 4 } }, // 纵向合并，范围是第4列的行3到行4

      //   { s: { c: 4, r: 3 }, e: { c: 4, r: 4 } }, // 纵向合并，范围是第5列的行3到行4

      // ];

文档地址： GitHub - Ctrl-Ling/XLSX-Style-Utils: 基于SheetJS以及XLSX-Style的纯前端带样式导出表格为Excel的工具包

前端菜菜
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用xlsx.full.min.js导出有复杂表头的excel（亲测有效）
07-28
使用xlsx.full.min.js导出有复杂表头的excel（亲测有效） > 今天项目用到了导出table表格，但表头有点特殊，多个合并的单元格。 > 搜索了半天，发现有博主使用 ``xlsx.full.min.js`` 做过此类功能，使用的是vue+elementUI，特在该基础上改进和封装了一下，兼容普通HTML的js引入。 > 包含 ``xlsx.full.util.js``、xlsx.full.min.js、index.html、vue.demo.html
vue纯前端实现json导出为excel文件(xlsx.full.min.js)
charlie_y的博客
06-04 1612
废话不多说，能实现导出为excel的库也不少，这次我用的是xlsx.full.min.js(git地址：https://github.com/SheetJS/sheetjs) 在utils里简单封装一下 import * as XLSX from 'xlsx' /** * 字符串转字符流 */ const s2ab = (s: string = '') => { //字符串转字符流 let buf = new ArrayBuffer(s.length) let view = new U
使用Vue+xlsx+xlsx-style实现导出自定义样式的Excel文件
都随它大小便吧
06-09 5287
本文就是上一篇《使用Python+openpyxl实现导出自定义样式的Excel文件》文章中提到的“之前项目的导出Excel文件操作都是在前端完成的...”这段话中基于前端实现的导出Excel文件方法。
xlsx.full.min.js
06-19
xlsx.full.min.js
js操作excel常用方法,js处理表格数据
阿发狗伪原创
11-28 2375
大家好，小编为大家解答js操作excel常用方法的问题。JavaScript 读取 Excel 文档里的内容实例演示。④ 将读取的 Excel 内容转化为 json 字符串。④ 将读取的 Excel 内容转化为 json 字符串。① 下载 xlsx.full.min.js 支持包。① 下载 xlsx.full.min.js 支持包。看下控制台，这是返回的第一个。可以获取指定单元格里的内容。第二章：功能实现与使用演示。第二章：功能实现与使用演示。③ 获取指定单元格的内容。③ 获取指定单元格的内容。
导出带有图片xlsx的js插件
12-20
可直接导出带有图片得xlsx文件
vue js-table2excel + xlsx 文件导入导出 （导出包含图片）
最新发布
qq_44428688的博客
01-03 1835
如果做文件的小批量导出不用转换base64 直接用http url即可 文件量或者图片过大可能会出现加载失败的情况 避免这个问题 是跑all方法去请求url资源转换成base64 再渲染就能够全部导出 转base64的时候做了一个图片压缩 不需要的可以去掉。代码中掺杂着文本匹配Id 的逻辑 不需要的可以忽略 #@是个人习惯 可以换成别的 表格头文本描述和字段值的分隔符。需要安装以下这两个依赖包 js-table2excel 用于文件导出 xlsx 用于文件导入。
xlsx.full.min.js-导入导出excel获取数据demo.zip
08-02
标题 "xlsx.full.min.js-导入导出excel获取数据demo.zip" 提到的核心知识点是使用 "xlsx.full.min.js" 库来实现Excel文件的导入、导出以及数据获取功能。这个库是一个压缩包，其中包含了演示这些功能的代码示例。...
导出Excel功能插件 xlsx.full.min.js
02-21
"xlsx.full.min.js" 是一个专门用于实现这个功能的JavaScript库，它允许开发者在网页上轻松地将数据转换为Excel格式，并提供下载。这个插件是基于ECMAScript（JavaScript的标准化版本）编写的，因此对于熟悉...
xlsx.full.min.js官方工具包用于js读取excel使用
08-02
【文件名：xlsx.full.min.js】。JavaScript 技术篇 - js读取Excel文档里的内容实例演示，js如何读取excel指定单元格的内容，js将excel的内容转化为json字符串方法：https://blog.csdn.net/qq_38161040/article/details/118678016
读取和导出excel的工具库xlsx.full.min.js
10-22
《使用xlsx.full.min.js库进行Excel的读取与导出》 在Web开发中，处理Excel数据是一项常见的任务，无论是为了导入用户的数据还是导出应用的报表。在JavaScript环境中，xlsx.full.min.js是一个非常实用的工具库，它...
js生成excel样式文件xlsx.full.min.js
08-09
`xlsx.full.min.js`是一个强大的库，它允许开发者在前端生成Excel文件并设置样式，极大地扩展了JavaScript处理Excel数据的能力。这个库的核心是XLSX库，它是一个用于读写电子表格文件（如.xlsx和.xls）的开源...
前端使用xlsx-js-style导出Excel文件并修饰单元格样式
热门推荐
Eliaukoyx
01-12 1万+
前端使用xlsx-js-style导出Excel文件并修饰单元格样式
前端导出Excel，修改字体样式以及居中等
qq_51925599的博客
04-10 2864
/ multiHeader.length = 0 时表头有合并单元格，表头只占2行A2-Z2，A3-Z3，这是没有描述信息只有表头合并的。// if (['date'].includes(englishKey)) { //转化日期格式。// 老版本(14) 是默认导出，所以直接用的是import XLSX from 'xlsx'"AJ", ///这里可根据自己表格的数据进行增加，这里主要是设置样式-filename: 'excel-list', // 文件名。'消耗': 'sum_cost'，
Excel.js导出图片和表格
weixin_45514326的博客
10-25 1887
纯前端导出excel
前端导出 excel ，设置字体，列宽，行高，对其方式，合并单元格等效果
ljy123w的博客
04-07 6249
一、先看实现后的图 二、技术 这个表格主要采用了 xlsx-style 来实现 https://www.npmjs.com/package/xlsx-style https://github.com/protobi/js-xlsx/tree/beta 三、入门 由于 npm 和 git 上的文档都是英文，看过一遍之后就不想再看了，所以这里做一个记录。 xlsx-style 是一个纯 javascript 实现的读取和生成 excel 的 npm 包。 xlsx-style 来源于 Shee
js xlsx.full.min 导出excel 设置样式
08-09
使用js-xlsx库可以方便地导出Excel并设置样式。首先，确保已经引入了js-xlsx库。 要设置单元格的样式，可以使用SheetJS提供的`xlsx`对象的`utils.cellStyles`方法来创建样式对象。这个方法接受一个参数，指定要应用的样式。以下是一个示例代码来设置单元格的背景颜色和字体颜色： ```javascript var style = { fill: { fgColor: { rgb: "FF0000FF" } // 背景颜色 }, font: { color: { rgb: "FFFFFF00" } // 字体颜色 } }; var ws = XLSX.utils.aoa_to_sheet([ ["Hello", "World"], [1, 2] ]); ws["A1"].s = style; // 设置A1单元格的样式 var wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); // 添加工作表到工作簿 XLSX.writeFile(wb, "output.xlsx"); // 导出Excel文件 ``` 上述代码中，首先定义了一个样式对象`style`，在样式对象中设置了背景颜色和字体颜色。然后创建了一个工作表对象`ws`，在工作表中设置了一个单元格的样式。接着创建了一个工作簿对象`wb`，并将工作表添加到工作簿中。最后使用`XLSX.writeFile`方法将工作簿导出为Excel文件。 这样，在导出的Excel文件中，A1单元格的背景颜色为蓝色，字体颜色为黄色。 除了设置背景颜色和字体颜色，`utils.cellStyles`方法还提供了其他样式选项，如边框（`border`）、字体大小（`fontSize`）、字体加粗（`bold`）等。可以根据需要进行设置。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值