导入导出（Excel）

 

导入导出（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() 方法被用于将 中的每个对象转换为一个数组，然后将这些数组组合成一个二维数组 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>

最后成果：