使用 exceljs 导出表格有下拉框(浏览器,客户端)

2023-11-17

exceljs服务端导出表格,浏览器直接用不了,nodejs的运行环境和浏览器的不同
exceljs.min.js 下载地址:https://www.bootcdn.cn/exceljs/,git的exceljs里面没有这个文件。

代码和nodejs版没什么区别

<script src="https://cdn.bootcdn.net/ajax/libs/exceljs/4.2.0/exceljs.min.js"></script>
<script>
		///
		async function ddd() {
			console.log(111)

			const wb = new ExcelJS.Workbook();
			const Sheet1 = wb.addWorksheet('Sheet1');
			const Sheet2 = wb.addWorksheet('Sheet2');
			const test = wb.addWorksheet('test');
			
			//表2 性别
			Sheet2.columns = [{
					header: '性别',
					key: 'sex',
					width: 20
				},
				{
					header: '性别值',
					key: 'sexVal',
					width: 20
				},
			];


			const Sheet2_data = [{
				sex: '女',
				sexVal: '0',
			}, {
				sex: '男',
				sexVal: '1',
			}];

			Sheet2.addRows(Sheet2_data);

			// 添加性别管理器
			const _data = Sheet2_data.reduce((p, c) => {
				if (!p.has(c.sex)) {
					p.set(c.sex, [c.sexVal]);
				} else {
					const arr = p.get(c.sex);
					arr.push(c.sexVal);
				}
				return p;
			}, new Map());

			// console.log(_data)

			const sexs = Array.from(_data.keys());
			const sexVals = Array.from(_data.values());

			test.addRows(sexVals);


			test.eachRow(function(row, i) {
				const sex = sexs[i - 1];
				// console.log(sex, i);
				row.eachCell(function(cell, colNumber) {
					cell.addName(sex);
				});
			});



			Sheet1.columns = [{
					header: '编号',
					key: 'no',
					width: 20
				}, // A1
				{
					header: '姓名',
					key: 'name',
					width: 20
				}, // B2
				{
					header: '性别',
					key: 'sex',
					width: 20
				}, // C3
				{
					header: '性别值',
					key: 'sexVal',
					width: 20
				}, // D4
			];

			const Sheet1_data = [{
				no: '1',
				name: '小红',
				sex: '女',
				sexVal: '0',
			}]


			Sheet1.addRows(Sheet1_data);
			///
			new Array(1000).fill(0).forEach((_, idx) => {
				const row = idx + 2;
				// 渲染部门下拉框
				Sheet1.getCell(row, 3).dataValidation = {
					type: 'list',
					formulae: [`=Sheet2!$A$2:$A${Sheet2_data.length+1}`]
				};
				// 使用indirect函数添加引用, 渲染性别值
				Sheet1.getCell(row, 4).dataValidation = {
					type: 'list',
					formulae: [`=INDIRECT(C${row})`]
				};
			});

			// await wb.xlsx.writeFile('C:/Users/Administrator/Desktop/dd/模板列表.xlsx');
			// await wb.xlsx.writeFile('./dd.xlsx');
			const buffer = await wb.xlsx.writeBuffer();

			var blob = new Blob([buffer], {
				type: "application/octet-stream"
			});

			var url = blob, saveName = 'test.xlsx';

			if (typeof url == 'object' && url instanceof Blob) {
				url = URL.createObjectURL(url); // 创建blob地址
			}
			var aLink = document.createElement('a');
			aLink.href = url;
			aLink.download = saveName || ''; // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效
			var event;
			if (window.MouseEvent) event = new MouseEvent('click');
			else {
				event = document.createEvent('MouseEvents');
				event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0,
					null);
			}
			aLink.dispatchEvent(event);


			console.log(111)

			return;

			// return blob;
		}


		ddd();
<script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 exceljs 导出表格有下拉框(浏览器,客户端) 的相关文章

随机推荐