安装js-xlsx库： 在Vue项目的根目录下，使用npm或yarn安装xlsx库：
npm install xlsx
yarn add xlsx创建导出Excel的函数： 在src目录下创建一个新文件excel.js，并添加以下代码来定义导出Excel的功能：
import * as XLSX from "xlsx";
export function exportToExcel(data, filename = "data.xlsx") {
const worksheet = XLSX.utils.json_to_sheet(data);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
XLSX.writeFile(workbook, filename);
}在Vue组件中使用导出功能： 在需要添加导出功能的Vue组件中，比如src/components/ExportButton.vue，引入exportToExcel函数，并添加一个按钮来触发导出：
<template>
<button @click="handleExport">导出数据</button>
</template>
<script>
import { exportToExcel } from "@/excel.js";
export default {
data() {
return {
users: [
{ name: "John Doe", age: 30, email: "john.doe@example.com" },
{ name: "Jane Smith", age: 25, email: "jane.smith@example.com" },
],
};
},
methods: {
handleExport() {
exportToExcel(this.users, "users.xlsx");
},
},
};
</script>创建导入Excel的函数： 在excel.js文件中继续添加以下代码来定义从Excel文件导入数据的功能：
export function importFromExcel(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (event) => {
const data = new Uint8Array(event.target.result);
const workbook = XLSX.read(data, { type: "array" });
const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
const result = XLSX.utils.sheet_to_json(firstSheet, { header: 1 });
resolve(result);
};
reader.onerror = (error) => reject(error);
reader.readAsArrayBuffer(file);
});
}在Vue组件中使用导入功能： 在需要添加导入功能的Vue组件中，比如src/components/ImportButton.vue，引入importFromExcel函数，并添加一个文件输入框来触发导入：
<template>
<div>
<input type="file" @change="handleFileChange" />
<ul>
<li v-for="(user, index) in users" :key="index">{{ user }}</li>
</ul>
</div>
</template>
<script>
import { importFromExcel } from "@/excel.js";
export default {
data() {
return { users: [] };
},
methods: {
handleFileChange(event) {
const file = event.target.files[0];
importFromExcel(file)
.then((data) => {
this.users = data;
})
.catch((error) => {
console.error("导入失败", error);
});
},
},
};
</script>
有话要说