### Vue
.js 文件上传、导出 XLSX 和批量保存示例
#### 安装依赖库
为了实现文件上传、导出 XLSX 和批量保存的功能，首先需要安装 `xlsx` 库以及可能用到的其他辅助工具。
```bash
npm install xlsx file-saver axios
```
#### 创建组件结构
创建一个名为 `SpreadsheetComponent
.vue` 的组件用于管理这些操作：
```html
<template>
<div class="spreadsheet-container">
<!-- 文件上传 -->
<input type="file" @change="handleFileUpload" multiple />
<!--
数据展示区域 -->
<table v-if="data
.length >
0">
<thead>
<tr>
<th v-for="(header, index) in headers" :key="index">{{ header }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, rowIndex) in data" :key="rowIndex">
<td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
</tr>
</tbody>
</table>
<!-- 导出按钮 -->
<button @click="exportToExcel">导出为 Excel</button>
</div>
</template>
```
#### 处理逻辑
在 `<script>` 部分定义处理函数来完成文件解析、显示
数据表单和导出功能。
```javascript
<script setup>
import { ref } from 'vue';
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';
const files = ref([]);
const data = ref([]); // 存储读取的
数据
const headers = ref([]);
// 文件选择事件处理器
function handleFileUpload(event){
const selectedFiles = event
.target
.files;
Array
.from(selectedFiles)
.forEach(file => {
const reader = new FileReader();
reader
.onload = function(e) {
let workbook = XLSX
.read(e
.target
.result, {type:'array'});
// 假设只处理第一个工作簿的第一个 sheet
let firstSheetName = workbook
.SheetNames[
0];
let worksheet = workbook
.Sheets[firstSheetName];
// 将 JSON 转换成二维数组形式
let jsonData = XLSX
.utils
.sheet_to_json(worksheet);
if(jsonData
.length ===
0){return;}
// 更新界面中的表格头信息
headers
.value = Object
.keys(jsonData[
0]);
// 添加新加载的
数据至现有列表中
data
.value
.push(
...jsonData
.map(item=>Object
.values(item)));
};
reader
.readAsArrayBuffer(file);
});
}
// 导出当前
数据显示为 Excel 文件的方法
async function exportToExcel(){
/* 构建新的 Workbook 对象 */
var wb = XLSX
.utils
.book_new();
/* 把原始
数据转换成 Worksheet 格式并加入 Workbook 中 */
var ws_data = [
["姓名", "年龄"], // 表格头部
...data
.value // 用户输入的内容
];
var ws = XLSX
.utils
.aoa_to_sheet(ws_data);
/* 设置 Sheet 名字并将它添加到 WorkBook */
XLSX
.utils
.book_append_sheet(wb, ws, "Sheet
1");
/* 使用 FileSaver 插件将生成的工作薄对象转存为
.xlsx 文件 */
await XLSX
.writeFile(wb,"output
.xlsx");
}
</script>
```
此代码片段展示了如何利用 `xlsx` 库配合前端框架 Vue 来构建简单的电子表格应用[^
1]。通过上述方式可以轻松地支持多文件上传、查看内容预览以及一键导出所选文档为标准格式的 Excel 文件[^3]。
本文介绍了安卓AOA 1.0协议，详细阐述了配件如何检测和与Android设备建立通信的步骤，包括等待检测设备、确定配件模式支持、尝试启动配件模式以及建立通信。在设备连接时，配件应检查厂商ID和产品ID，通过特定控制请求来启动配件模式。最后，配件会根据设备的产品ID查询接口和批量端点进行通信。
最低0.47元/天 解锁文章
扫一扫
2188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
