首页vue3.2 导入excel

vue3.2 导入excel

时间: 2023-10-08 13:05:24 浏览: 106

在 Vue 3.2 中，你可以使用 `xlsx` 库来导入 Excel 文件。以下是一个简单的示例： 1. 安装 `xlsx` 库 ``` npm install xlsx ``` 2. 在 Vue 组件中导入 `xlsx` ```js import XLSX from 'xlsx'; ``` 3. 在模板中添加文件上传组件，并在上传后调用导入函数 ```html <template> <div> <input type="file" @change="importExcel"> </div> </template> ``` 4. 编写导入函数 ```js importExcel(event) { const file = event.target.files[0]; const reader = new FileReader(); reader.onload = (e) => { const data = e.target.result; const workbook = XLSX.read(data, { type: 'binary' }); const sheetName = workbook.SheetNames[0]; const worksheet = workbook.Sheets[sheetName]; const result = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); console.log(result); }; reader.readAsBinaryString(file); } ``` 以上代码中，我们首先获取上传的文件，并使用 `FileReader` 对象读取文件内容。然后，我们使用 `XLSX.read` 方法将文件内容转换为工作簿对象，并获取第一个工作表的名称和内容。最后，我们使用 `XLSX.utils.sheet_to_json` 方法将工作表内容转换为 JSON 格式，并将结果输出到控制台。注意：需要注意的是，`XLSX` 库目前还不支持在浏览器环境中直接读取远程 Excel 文件，因此你需要先将文件下载到本地后再进行导入操作。

阅读全文