网站首页 > 技术文章 正文
前言
在前端项目开发中,读写Excel文件的需求变得越来越常见。以往,这些任务通常由后端处理,但随着前端技术的发展和浏览器功能的提升,JavaScript为我们提供了更多处理本地文件的能力。其中,FileReader对象是一个强大的工具,允许浏览器对用户本地文件进行操作。此外,一些技术大佬们贡献的工具类库如xlsx模块,进一步简化了在前端读取和解析Excel文件的过程。
在本文中,将详细介绍如何在Vue项目中利用FileReader对象和xlsx模块来读取Excel文件的内容。我将提供一系列步骤和示例代码,帮助大家了解如何在现代浏览器中处理Excel文件的读写操作。
首先,本文将简要介绍FileReader对象的基本概念和用法,说明如何使用它来读取用户选择的Excel文件。然后,我们将详细介绍xlsx模块的功能和用法,展示如何将读取到的Excel数据转换为可用的数据结构,以便在Vue项目中进行进一步的处理和展示。
不尽之处,欢迎评论区交流。
安装
npm install xlsx
# or
yarn add xlsx
FileReader 对象
FileReader对象是JavaScript中的内置对象,用于在Web应用程序中读取文件内容。它提供了一种异步方式来读取文件,而不需要将整个文件加载到内存中。
FileReader对象提供了几种方法和事件用于读取文件内容。下面是一些常用的方法和事件:
- readAsText(file[, encoding]):以文本格式读取文件内容。可选参数encoding指定文件编码,默认为UTF-8。
- readAsArrayBuffer(file):以二进制数据(ArrayBuffer)格式读取文件内容。
- readAsDataURL(file):以DataURL格式读取文件内容,返回一个包含文件数据的URL。
- abort():取消文件读取操作。
- onload:文件读取成功时触发的事件。
- onerror:文件读取错误时触发的事件。
使用FileReader对象读取文件的一般步骤如下:
- 创建一个新的FileReader对象:const reader = new FileReader();
- 为onload事件绑定一个处理函数,以在文件读取成功时执行操作:reader.onload = function(event) { // 处理文件内容 }
- 使用合适的方法(如readAsText()、readAsArrayBuffer()或readAsDataURL())读取文件内容:reader.readAsText(file)。
- 在onload事件处理函数中,可以通过event.target.result来获取读取到的文件内容。
FileReader对象为处理文件上传、图像预览、文件解析等场景提供了方便的功能,并且与其他Web API(如File API和XHR)结合使用,可以实现更多复杂的文件操作。
更多内容请查阅:FileReader MDN 官方文档
读取实例
下面是一个使用 xlsx 模块在Vue项目中读取本地Excel文件的综合实例。例子在页面上提供了一个文件选择表单来选择Excel文件,程序会使用FileReader对象和xlsx 模块对Excel内容进行读取和处理,并最终以表格的形式显示到页面上。
<template>
<div>
<input type="file" @change="handleFileSelect" accept=".xlsx, .xls" />
<table>
<thead>
<tr>
<th v-for="header in headers" :key="header">{{ header }}</th>
</tr>
</thead>
<tbody>
<tr v-for="row in rows" :key="row.index">
<td v-for="cell in row.cells" :key="cell.column">{{ cell.value }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import { read, utils } from 'xlsx';
export default {
data() {
return {
headers: [],
rows: [],
};
},
methods: {
// 选择文件
handleFileSelect(event) {
const file = event.target.files[0];
const reader = new FileReader();
// 处理文件内容
reader.onload = (e) => {
const data = new Uint8Array(e.target.result);
const workbook = read(data, { type: 'array' });
const worksheet = workbook.Sheets[workbook.SheetNames[0]];
const jsonData = utils.sheet_to_json(worksheet, { header: 1 });
// 提前文件内容
this.headers = jsonData[0];
this.rows = jsonData.slice(1).map((row, index) => ({
index: index + 1,
cells: row.map((cell, column) => ({
column: column + 1,
value: cell,
})),
}));
};
// 读取文件内容
reader.readAsArrayBuffer(file);
},
},
};
</script>
写入实例
下面的代码是使用 xlsx 模块在Excel中写入数据并导出Excel文件到本地的用例。第一步获取用户输入,第二步使用 xlsx 模块的 writeFile 方法写入内容并下载到本地。
<template>
<div>
<form @submit.prevent="saveExcel">
<label for="name">姓名:</label>
<input type="text" id="name" v-model="name" required>
<br>
<label for="sex">性别:</label>
<input type="text" id="sex" v-model="sex" required>
<br>
<label for="age">年龄:</label>
<input type="number" id="age" v-model="age" required>
<br>
<label for="dept">职位:</label>
<input type="text" id="dept" v-model="dept" required>
<br>
<button type="submit">Save to Excel</button>
</form>
</div>
</template>
<script>
import { utils, writeFile } from 'xlsx';
export default {
data() {
return {
name: '',
age: null,
sex: '',
dept: '',
};
},
methods: {
// 保存excel
saveExcel() {
let data = []
data.push(['姓名', '性别', '年龄', '职位'])
data.push([this.name, this.sex, this.age, this.dept])
// for (let i=0; i<10; i++) {
// data.push([(i + 1) + '', '学校A'])
// }
let WorkSheet = utils.aoa_to_sheet(data)
let new_workbook = utils.book_new()
utils.book_append_sheet(new_workbook, WorkSheet, '测试数据')
writeFile(new_workbook, `测试数据.xlsx`)
},
},
};
</script>
<style scoped>
form {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 20px;
}
input {
margin-bottom: 10px;
}
button {
margin-top: 10px;
}
</style>
总结
本文介绍了如何在前端项目中利用FileReader对象和xlsx模块读取Excel文件的内容。首先,FileReader对象是一个内置对象,可以异步读取文件内容,并提供了几种方法和事件用于文件操作。然后,介绍了xlsx模块的功能和用法,展示了如何将读取到的Excel数据转换为可用的数据结构以及如何写入Excel内容并下载到本地。最后,给出了一个实例代码,演示了在Vue项目中如何读取本地Excel文件并展示到页面上。
通过本文的介绍和示例代码,大家可以了解到如何使用FileReader对象和xlsx模块来处理前端读取Excel文件的需求。这对于前端开发中处理Excel文件的场景非常有帮助,可以提升用户体验并简化开发流程。
作者:东方红杉
链接:https://juejin.cn/post/7340899332509679653
- 上一篇: 上传组件技术方案设计 文件上传组件
- 下一篇: Polyv视频下载 · 初探
猜你喜欢
- 2024-11-13 JS二进制:Blob、File、FileReader、ArrayBuffer、Base64
- 2024-11-13 实现HTML5网站中常见的拖拽上传文件
- 2024-11-13 input上传图片并压缩(vue,前端,js)
- 2024-11-13 怎样用Nodejs,Express和FFmpeg.wasm构建一个处理多媒体的API
- 2024-11-13 为什么 JS 开发者更喜欢 Axios 而不是 Fetch?
- 2024-11-13 leaflet地图截图批量导出 leaflet 底图
- 2024-11-13 拖拽外部文件进行读取-FileReader
- 2024-11-13 JavaScript `FileReader` 接口提供的文件处理方法
- 2024-11-13 vue手把手教学~搭建web聊天室 vue实现聊天功能
- 2024-11-13 Html5 上传图片 移动端、PC端通用
- 标签列表
-
- content-disposition (47)
- nth-child (56)
- math.pow (44)
- 原型和原型链 (63)
- canvas mdn (36)
- css @media (49)
- promise mdn (39)
- readasdataurl (52)
- if-modified-since (49)
- css ::after (50)
- border-image-slice (40)
- flex mdn (37)
- .join (41)
- function.apply (60)
- input type number (64)
- weakmap (62)
- js arguments (45)
- js delete方法 (61)
- blob type (44)
- math.max.apply (51)
- js (44)
- firefox 3 (47)
- cssbox-sizing (52)
- js删除 (49)
- js for continue (56)
- 最新留言
-