How to use vue on the front end to realize the upload, analysis and export function of excel
To use Vue to implement Excel upload, analysis and export functions, you need to do the following steps:
- install dependencies
First, you need to install the two libraries xlsx and file-saver for reading and exporting Excel files. You can run the following command in your Vue project:
npm install xlsx file-saver --save
- Write upload component
Next, you need to write the upload component as follows:
<template>
<div>
<input type="file" @change="onFileChange" />
<button @click="exportFile">导出Excel</button>
</div>
</template>
<script>
import XLSX from 'xlsx';
import FileSaver from 'file-saver';
export default {
name: 'ExcelUpload',
methods: {
onFileChange(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = (event) => {
const binaryData = event.target.result;
const workbook = XLSX.read(binaryData, {
type: 'binary' });
// 处理Excel文件，比如将数据保存到 Vuex 中
};
reader.readAsBinaryString(file);
},
exportFile() {
// 从 Vuex 中获取数据并处理成 XLSX 的工作表数据
const workbook = XLSX.utils.book_new();
const worksheet = XLSX.utils.json_to_sheet(/* Excel 数据 */);
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
// 导出 Excel 文件
const buffer = XLSX.write(workbook, {
type: 'buffer', bookType: 'xlsx' });
FileSaver.saveAs(new Blob([buffer], {
type: 'application/octet-stream' }), 'example.xlsx');
},
},
};
</script>
This component contains a file selection box and an export button. When the user selects an Excel file and uploads it, we use FileReaderthe to read the binary data into memory, then use XLSXthe library to parse the Excel file and do some processing. The onFileChangemethod is the code for processing the uploaded Excel file.
- Working with data in Excel
After uploading the Excel file, you need to process the data, such as saving the data to Vuex. In this example, we can save the read data into the state of Vuex:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
excelData: null,
},
mutations: {
setExcelData(state, data) {
state.excelData = data;
},
},
});
Then, when uploading the file, we can save the parsed data into Vuex:
onFileChange(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = (event) => {
const binaryData = event.target.result;
const workbook = XLSX.read(binaryData, {
type: 'binary' });
// 将 Excel 数据保存到 Vuex 中
const worksheet = workbook.Sheets[workbook.SheetNames[0]];
const data = XLSX.utils.sheet_to_json(worksheet, {
header: 1 });
this.$store.commit('setExcelData', data);
};
reader.readAsBinaryString(file);
},
- Export Excel file
Finally, you need to export an Excel file. You can use XLSXthe library to convert the data to an Excel worksheet, and then use file-saverthe library to export it. In this example we store data in Vuex and write it to an Excel file on export button click:
exportFile() {
const data = this.$store.state.excelData;
// 处理数据，将其转换为 XLSX 工作表数据
const workbook = XLSX.utils.book_new();
const worksheet = XLSX.utils.json_to_sheet(/* Excel 数据 */);
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
// 导出文件
const buffer = XLSX.write(workbook, {
type: 'buffer', bookType: 'xlsx' });
FileSaver.saveAs(new Blob([buffer], {
type: 'application/octet-stream' }), 'example.xlsx');
},
The above is the use of Vue to realize the upload, analysis and export of Excel