JavaScript导入导出excel

在JavaScript的浏览器环境下导入和导出Excel文件，主要可以通过一些库来帮助我们简化操作，比如SheetJS（也称为xlsx库）和FileSaver.js。以下是如何使用这些库来实现Excel的导入和导出的基本步骤：

导入Excel

导入Excel文件通常涉及到HTML的<input type="file">元素，以及使用FileReader来读取用户选择的文件，然后使用SheetJS解析这个文件。

1. HTML 部分

   html复制代码

   	<input type="file" id="file-input" />
   	<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.full.min.js"></script>

2. JavaScript 部分

   javascript复制代码

   	document.getElementById('file-input').addEventListener('change', function(e) {
   	var file = e.target.files[0];
   	var reader = new FileReader();
   	reader.onload = function(e) {
   	var data = new Uint8Array(e.target.result);
   	var workbook = XLSX.read(data, {type: 'array'});
   	// 假设我们处理第一个工作表
   	var firstSheetName = workbook.SheetNames[0];
   	var worksheet = workbook.Sheets[firstSheetName];
   	var json = XLSX.utils.sheet_to_json(worksheet, {header: 1});
   	console.log(json); // 这里json变量包含了Excel数据
   	};
   	reader.readAsArrayBuffer(file);
   	});

导出Excel

导出Excel文件通常涉及到使用SheetJS来创建或修改一个工作簿（workbook），然后使用FileSaver.js库来触发下载。

1. HTML 部分（假设你已经有一个按钮用于触发导出）

   html复制代码

   	<button id="export-button">导出Excel</button>
   	<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.full.min.js"></script>
   	<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

2. JavaScript 部分

   javascript复制代码

   	document.getElementById('export-button').addEventListener('click', function() {
   	// 创建一个新的工作簿
   	var wb = XLSX.utils.book_new();
   	// 假设我们有以下数据
   	var data = [
   	["姓名", "年龄", "城市"],
   	["张三", 28, "北京"],
   	["李四", 22, "上海"]
   	];
   	// 将数据添加到工作簿中
   	var ws = XLSX.utils.aoa_to_sheet(data);
   	XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
   	// 导出工作簿
   	XLSX.writeFile(wb, "example.xlsx");
   	});

注意：在导出Excel时，SheetJS和FileSaver.js一起工作，在客户端直接生成并下载Excel文件。这不需要服务器端的支持，但请注意，由于浏览器的安全限制，某些配置（如HTTPS环境）可能需要特别注意。