使用 excelJs 插件导出 excel 实例（原生js，非 node 环境）

最新推荐文章于 2024-04-18 18:07:00 发布

-sea-

最新推荐文章于 2024-04-18 18:07:00 发布

阅读量1.5k

点赞数 3

分类专栏：文件

本文链接：https://blog.csdn.net/qq_34695703/article/details/108056256

版权

文件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. 实现功能

现有数据如下：

dataList = [
    { name: '獐伞', age: 18, gender: '男' },
    { name: '里斯', age: 18, gender: '女' },
    { name: '汪芜', age: 18, gender: '男' }
];

导出效果如下图：

2. 步骤

第一步：引入插件

<script src="./js/exceljs.js"></script>

下载链接: https://pan.baidu.com/s/1CFxwsnmntiBPGM9ofBQZWA 提取码: i1as 复制这段内容后打开百度网盘手机App，操作更方便哦

第二步：导出（完整代码）

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
</head>
<body>
<p>
    <button onclick="exportExcel()">导出Excel</button>
</p>
</body>
</html>
<script src="./js/exceljs.js"></script>

<script type="text/javascript">
	function exportExcel() {
		// 要导出的数据
		let dataList = [
		    { name: '獐伞', age: 18, gender: '男' },
		    { name: '里斯', age: 18, gender: '女' },
		    { name: '汪芜', age: 18, gender: '男' }
		];
		// 创建工作簿
		var workbook = new ExcelJS.Workbook();
		// 创建工作表
		const sheet = workbook.addWorksheet('Sheet1');
		// 创建表头
		/**
		 * header: 显示的内容
		 * key: 设置一个唯一的key作为属性名，添加行数据时与之对应
		 * width: 设置单元格的宽
		 */
		sheet.columns = [
			{ header: '姓名', key: 'name', width: 10 },
		  	{ header: '年龄', key: 'age', width: 10 },
		  	{ header: '性别', key: 'gender', width: 10 }
		];
		// 添加行数据
		dataList.forEach((item, index) => {
			sheet.addRow({ name: item.name, age: item.age, gender: item.gender });
		});
		// 下载 excel
		workbook.xlsx.writeBuffer().then((buf) => {
            let blob = new Blob([buf], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' });
            const downloadElement = document.createElement('a')
		    let href = window.URL.createObjectURL(blob)
		    downloadElement.href = href
		    downloadElement.download = "人员信息表.xlsx"; // 文件名字
		    document.body.appendChild(downloadElement)
		    downloadElement.click()
		    document.body.removeChild(downloadElement) // 下载完成移除元素
		    window.URL.revokeObjectURL(href) // 释放掉blob对象
		});
	}
</script>

-sea-

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
使用 excelJs 插件导出 excel 实例（原生js，非 node 环境）

1. 实现功能现有数据如下：dataList = [ { name: '獐伞', age: 18, gender: '男' }, { name: '里斯', age: 18, gender: '女' }, { name: '汪芜', age: 18, gender: '男' }];导出效果如下图：2. 步骤第一步：引入插件<script src="./js/exceljs.js"></script>下载链接: https:
复制链接

扫一扫