导入导出（Excel）
首先 vue安装插件 （最后有完整代码）
npm install xlsx file-saver
其次：
简单的导出按钮
代码：
<template>
<div>
<el-button type="primary" @click="exportExcel">导出 Excel</el-button>
<input
type="file"
ref="fileInput"
style="display: none"
@change="importExcel"
/>
</div>
</template>
在script引用
//导出需要的文件
import * as XLSX from "xlsx";
import { saveAs } from "file-saver";
下面写方法
用于显示数据 传入到定义的导出数组中
定义的data数组 用于在Excel 显示需要那些字段，这里就写哪些字段，其他无需改动
这里map() 方法被用于将 this.datalist中的每个对象转换为一个数组，然后将这些数组组合成一个二维数组 data。便于后续使用 XLSX.utils.aoa_to_sheet() 方法将数据导出为 Excel 文件。
用于处理从后台导入的数据 （
首先，通过 this.$refs.fileInput.files[0] 获取用户选择的文件。然后，创建一个 FileReader 对象，并为其设置 onload 事件处理程序。
当文件读取完成时，reader.onload 事件处理程序会执行，其中 e.target.result 包含文件的二进制数据。根据 e.target.result 的类型（ArrayBuffer），使用 XLSX.read() 方法将二进制数据解析为工作簿对象 workbook。
接下来，通过 workbook.SheetNames[0] 获取第一个工作表的名称，然后通过 workbook.Sheets[sheetName] 获取该工作表的对象 sheet。
使用 XLSX.utils.sheet_to_json() 方法，可以将工作表转换为 JSON 对象。在方法的参数中，我们设置 header: 1，表示将表格的第一行作为 JSON 对象的键值。最终，得到的 JSON 对象存储在 jsonData 中。
在注释处的 TODO 部分，您可以编写自己的代码来处理导入的数据。例如，您可以将 jsonData 存储到组件的数据中，或者进行其他各种操作。
最后，将 jsonData 打印到控制台以供调试和查看导入结果。您可以根据具体需求对此部分进行修改和扩展。
）
以下是完整代码：
<template>
<div>
<el-button type="primary" @click="exportExcel">导出 Excel</el-button>
<input
type="file"
ref="fileInput"
style="display: none"
@change="importExcel"
/>
</div>
</template>
<script>
//导出需要的文件
import * as XLSX from "xlsx";
import { saveAs } from "file-saver";
export default {
data() {
return {
//导出需要的数组 与显示共用同一个数组
datalist: [],
dialogFormVisible: false,
//省市区
areaData: [
{
value: 0,
province: "",
},
{
value: 1,
city: "",
},
{
value: 2,
county: "",
},
],
};
},
created() {
this.axios
.get("https://localhost:7059/api/Login/GetUserInfos")
.then((res) => {
this.datalist = res.data;
console.log(this.datalist);
})
.catch((error) => {
console.error(error);
});
},
methods: {
//导出
exportExcel() {
// 构造数据
const data = [
["姓名", "性别", "省", "市", "区", "详细地址", "创建日期", "修改日期"],
...this.datalist.map((item) => [
item.userName,
item.sex ? "男" : "女",
item.provName,
item.cityName,
item.countryName,
item.addressDetail,
item.createDate,
item.updateDate,
]),
];
// 创建 workbook 对象
const workbook = XLSX.utils.book_new();
const sheet = XLSX.utils.aoa_to_sheet(data);
XLSX.utils.book_append_sheet(workbook, sheet, "Sheet1");
// 将 workbook 导出为 Excel 文件
const excelBuffer = XLSX.write(workbook, {
bookType: "xlsx",
type: "array",
});
const excelBlob = new Blob([excelBuffer], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
});
saveAs(excelBlob, "data.xlsx");
},
//导入处理
importExcel() {
const file = this.$refs.fileInput.files[0];
const reader = new FileReader();
reader.onload = (e) => {
const data = new Uint8Array(e.target.result);
const workbook = XLSX.read(data, { type: "array" });
const sheetName = workbook.SheetNames[0];
const sheet = workbook.Sheets[sheetName];
// 将 Excel 数据转为 JSON 对象
const jsonData = XLSX.utils.sheet_to_json(sheet, { header: 1 });
// TODO: 处理导入的数据
console.log(jsonData);
};
reader.readAsArrayBuffer(file);
},
},
};
</script>
最后成果：
标签：XLSX,vue,const,导出,Excel,item,导入,workbook,sheet From： https://www.cnblogs.com/qibaidao/p/17655983.html