Nodejs使用exceljs實現(xiàn)excel導入導出

更新時間：2024年03月18日 09:35:29 作者：云牧

在日常開發(fā)中,我們常需在后臺管理系統(tǒng)中實現(xiàn)數(shù)據(jù)的導入與導出功能,以便與?Excel?文件進行交互,本文將使用使用exceljs實現(xiàn)excel導入導出功能,需要的可以參考下

Excel 數(shù)據(jù)處理簡介

Excel 是廣泛應用于辦公場景的數(shù)據(jù)處理軟件。

在日常開發(fā)中，我們常需在后臺管理系統(tǒng)中實現(xiàn)數(shù)據(jù)的導入與導出功能，以便與 Excel 文件進行交互。

使用 exceljs 庫進行 excel 數(shù)據(jù)處理

exceljs 簡介

在 Node.js 環(huán)境和瀏覽器中，我們常用 exceljs 這個包來解析和生成 Excel 文件。該包在 npm 官網(wǎng)上每周有超過 30 萬的下載量，足見其受歡迎程度。

環(huán)境搭建

mkdir exceljs-test
cd exceljs-test
npm init -y

安裝 exceljs：

npm install exceljs

新建 data.xlsx：

從 Excel 文件讀取數(shù)據(jù)

工作表結構遵循層級關系：workbook（工作簿）> worksheet（工作表）> row（行）> cell（單元格）。通過遍歷這些層級，我們可以獲取所有數(shù)據(jù)：

// 引入 exceljs 庫
const { Workbook } = require('exceljs');

// 異步函數(shù)讀取 Excel 文件
async function main() {
	// 創(chuàng)建一個Workbook實例，用于處理Excel文件
	const workbook = new Workbook();

	// 從指定路徑讀取Excel文件
	const dataBook = await workbook.xlsx.readFile('./data.xlsx');

	// 遍歷Excel中的每個工作表
	dataBook.eachSheet((sheet, index1) => {
		console.log('工作表 ' + index1);

		// 遍歷每個工作表中的每行數(shù)據(jù)
		sheet.eachRow((row, index2) => {
			const rowData = []; // 用于存儲當前行的數(shù)據(jù)

			row.eachCell((cell, index3) => {
				// 遍歷當前行的每個單元格，并將值存儲到rowData數(shù)組中
				rowData.push(cell.value);
			});

			console.log('行 ' + index2, rowData);
		});
	});
}

main();

node 運行：

我們已經(jīng)解析出 excel 數(shù)據(jù)了。

exceljs 還提供了簡便的方法，可以直接調(diào)用 worksheet 的 getSheetValues 來拿到表格數(shù)據(jù)，不用自己遍歷：

這就是解析 excel 文件。

導入數(shù)據(jù)的時候，按照格式從中解析數(shù)據(jù)然后存入數(shù)據(jù)庫就行。

一般我們都會提供一個 excel 模版，用這個模版來填數(shù)據(jù)，然后再導入。

數(shù)據(jù)導出

使用 exceljs 進行數(shù)據(jù)導出：

const { Workbook } = require('exceljs');

async function main() {
	// 創(chuàng)建一個新的工作簿
	const workbook = new Workbook();
	// 添加一個新的工作表，命名為'hong'
	const worksheet = workbook.addWorksheet('hong');

	// 定義工作表的列結構
	worksheet.columns = [
		{ header: 'ID', key: 'id', width: 20 },
		{ header: '姓名', key: 'name', width: 40 },
		{ header: '年齡', key: 'age', width: 20 },
	];

	// 數(shù)據(jù)數(shù)組，用于填充工作表
	const data = [
		{ id: 1, name: '探春', age: 18 },
		{ id: 2, name: '迎春', age: 19 },
		{ id: 3, name: '惜春' },
	];

	// 向工作表中添加數(shù)據(jù)行
	worksheet.addRows(data);

	// 將工作簿保存為Excel文件
	workbook.xlsx.writeFile('./data2.xlsx');
}

main();

運行后產(chǎn)生的 data2.xlsx 如下：

我們可以遍歷行和列，對特定單元格進行樣式設置，如字體、背景色、邊框等。

比如通過 cell.style 可以設置 font、fill、border、alignment 這些。

在瀏覽器中使用 ExcelJS 庫解析 Excel 文件

創(chuàng)建 index.html，引入 exceljs 包：

<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 加載ExcelJS庫 -->
		<script src="https://unpkg.com/exceljs@4.4.0/dist/exceljs.min.js"></script>
	</head>
	<body>
		<!-- 文件選擇輸入框 -->
		<input id="fileInput" type="file" />

		<script>
			const fileInput = document.getElementById('fileInput');

			// 文件選擇變化時的處理邏輯
			fileInput.onchange = async () => {
				// 獲取選中的文件
				const file = fileInput.files[0];

				const { Workbook } = ExcelJS;

				const workbook = new Workbook();

				const loadedWorkbook = await workbook.xlsx.load(file);

				loadedWorkbook.eachSheet((sheet, index1) => {
					console.log('工作表' + index1);

					const value = sheet.getSheetValues();

					console.log(value);
				});
			};
		</script>
	</body>
</html>

啟動靜態(tài)服務器：

npx http-server .

同樣解析出了 excel 的內(nèi)容。

在瀏覽器中使用 ExcelJS 庫生成 Excel 文件并下載

然后再試試生成 excel：

這里我創(chuàng)建了一個 10M 的 ArrayBuffer 來寫入數(shù)據(jù)，之后再讀取。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<script src="https://unpkg.com/exceljs@4.4.0/dist/exceljs.min.js"></script>
	</head>
	<body>
		<script>
			const { Workbook } = ExcelJS;

			async function main() {
				// 創(chuàng)建一個新的工作簿
				const workbook = new Workbook();
				// 添加一個新的工作表，命名為'hong'
				const worksheet = workbook.addWorksheet('hong');

				// 定義工作表的列結構
				worksheet.columns = [
					{ header: 'ID', key: 'id', width: 20 },
					{ header: '姓名', key: 'name', width: 40 },
					{ header: '年齡', key: 'age', width: 20 },
				];

				// 數(shù)據(jù)數(shù)組，用于填充工作表
				const data = [
					{ id: 1, name: '寶玉', age: 18 },
					{ id: 2, name: '寶釵', age: 19 },
					{ id: 3, name: '黛玉' },
				];

				worksheet.addRows(data);

				// 將工作簿寫入 ArrayBuffer 并下載
				const buffer = new ArrayBuffer(10 * 1024 * 1024); // 分配足夠大的內(nèi)存空間
				const res = await workbook.xlsx.writeBuffer(buffer);

				download(res.buffer);
			}

			function download(arrayBuffer) {
				const link = document.createElement('a');

				// 創(chuàng)建 Blob 對象并生成 URL
				const blob = new Blob([arrayBuffer]);
				const url = URL.createObjectURL(blob);
				link.href = url;
				// 設置下載的文件名
				link.download = 'honglou.xlsx';

				// 插入鏈接到頁面并觸發(fā)點擊下載
				document.body.appendChild(link);

				link.click();
				// 下載完成后移除鏈接
				link.addEventListener('click', () => {
					link.remove();
				});
			}

			main();

			// 在頁面加載完畢后執(zhí)行
			window.onload = generateExcel;
		</script>
	</body>
</html>

和前面的邏輯一樣，只是把 writeFile 換成了 writeBuffer。

在瀏覽器中打開 index.html，Excel 文件將自動生成并下載：