使用Vue实现Excel文件的导入与导出

在现代Web应用中，数据的导入与导出是常见的需求之一。本文将介绍如何在Vue项目中实现Excel文件的导入与导出功能。我们将使用流行的xlsx库来处理Excel文件，并结合file-saver库来实现文件的保存。此外，还会展示如何使用Element UI实现文件上传的用户界面。

安装所需库

首先，需要安装以下库：

xlsx：用于读取和写入Excel文件。
file-saver：用于在浏览器中保存文件。
element-ui：提供友好的文件上传组件。

npm install xlsx file-saver element-ui

在Vue项目中配置Element UI

在你的main.js文件中引入Element UI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';Vue.use(ElementUI);new Vue({render: h => h(App)
}).$mount('#app');

导出Excel文件

使用xlsx和file-saver库，可以方便地在Vue项目中导出Excel文件。下面是一个简单的示例，展示如何导出包含表头和数据的Excel文件。

组件代码

<template><div><el-button type="primary" @click="exportToExcel">导出Excel</el-button></div>
</template><script>
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';export default {methods: {exportToExcel() {const data = [{ name: 'John', age: 30, city: 'New York' },{ name: 'Mike', age: 25, city: 'Chicago' },{ name: 'Sara', age: 28, city: 'Los Angeles' }];const headers = ['Name', 'Age', 'City'];const ws_data = [headers, ...data.map(item => [item.name, item.age, item.city])];const ws = XLSX.utils.aoa_to_sheet(ws_data);const wb = XLSX.utils.book_new();XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });const blob = new Blob([wbout], { type: 'application/octet-stream' });saveAs(blob, 'data.xlsx');}}
};
</script>

导入Excel文件

使用Element UI的文件上传组件和xlsx库，可以实现Excel文件的导入和解析。下面是一个详细的示例，展示如何在Vue项目中读取上传的Excel文件并显示其内容。

组件代码

<template><div><el-uploadaction="":before-upload="handleBeforeUpload":on-change="handleChange":show-file-list="false"><el-button type="primary">点击上传Excel文件</el-button></el-upload><table v-if="headers.length && data.length"><thead><tr><th v-for="(header, index) in headers" :key="index">{{ header }}</th></tr></thead><tbody><tr v-for="(row, index) in data" :key="index"><td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td></tr></tbody></table></div>
</template><script>
import * as XLSX from 'xlsx';export default {data() {return {headers: [],data: []};},methods: {handleBeforeUpload(file) {return false;},handleChange(file) {const reader = new FileReader();reader.onload = (e) => {const data = new Uint8Array(e.target.result);const workbook = XLSX.read(data, { type: 'array' });const firstSheetName = workbook.SheetNames[0];const worksheet = workbook.Sheets[firstSheetName];const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });this.headers = jsonData[0];this.data = jsonData.slice(1);};reader.readAsArrayBuffer(file.raw);}}
};
</script>