How to use Vue and Excel to batch edit and export data

How to use Vue and Excel to implement batch editing and export of data

In daily work, we often need to batch edit and export large amounts of data. This function can be realized very conveniently by combining Vue with Excel. This article will give a detailed introduction on how to use Vue and Excel to implement batch editing and export of data, and attach corresponding code examples.

1. Project preparation

First, we need to create a Vue project and introduce related dependency libraries. In the vue-cli project, you can install the required dependent libraries by entering the following command in the terminal:

npm install vue-xlsx --save
npm install xlsx-style --save

2. Batch editing of data

In the Vue component, we can Use tables to display data and perform corresponding batch editing operations. The following is a simple sample code:

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in dataList" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
        </tr>
      </tbody>
    </table>

    <button @click="exportData">导出数据</button>
    <button @click="importData">导入数据</button>
  </div>
</template>

<script>
import { utils } from "xlsx";
import { read, write } from "vue-xlsx";

export default {
  data() {
    return {
      dataList: [
        { name: "张三", age: 20, gender: "男" },
        { name: "李四", age: 25, gender: "女" },
        { name: "王五", age: 30, gender: "男" },
      ]
    }
  },

  methods: {
    exportData() {
      const worksheet = utils.json_to_sheet(this.dataList);
      const workbook = utils.book_new();
      utils.book_append_sheet(workbook, worksheet, "Sheet1");
      const excelData = write(workbook, { type: "binary" });
      this.downloadExcel(excelData, "data.xlsx");
    },

    importData() {
      const input = document.createElement("input");
      input.type = "file";
      input.accept = ".xlsx";
      input.addEventListener("change", (e) => {
        const fileReader = new FileReader();
        fileReader.onload = (e) => {
          const data = new Uint8Array(e.target.result);
          const workbook = utils.read(data, { type: "array" });
          const worksheet = workbook.Sheets[workbook.SheetNames[0]];
          this.dataList = utils.sheet_to_json(worksheet, { header: 1 });
        }
        fileReader.readAsArrayBuffer(e.target.files[0]);
      });
      input.click();
    },

    downloadExcel(data, filename) {
      const blob = new Blob([data], { type: "application/octet-stream" });
      const url = URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;
      link.download = filename;
      link.click();
      URL.revokeObjectURL(link.href);
    }
  }
}
</script>

In the above code, data is read and written by using the read and write methods of the vue-xlsx library. , realizes exporting data to Excel files and importing data from Excel files. Among them, the exportData method is used to export data. First, use utils.json_to_sheet to convert the data into a worksheet, and then use utils.book_append_sheet to add the worksheet to the worksheet. In the workbook, finally convert the workbook into binary data through write, and call the downloadExcel method to download. The importData method is used to import data. First, create an input element, set its type and accepted file types, and then convert the Excel file into an array through FileReader by listening to the change event of the input element, and use utils.readConvert the array to a workbook, and then convert the first sheet of the workbook to JSON data via utils.sheet_to_json and update it to the component's dataList.

3. Export of data

In addition to batch editing of data, we can also export the data to Excel files. The function of exporting data to Excel files has been implemented in the above code. By clicking the "Export Data" button, the exportData method will be called to export the dataList data to an Excel file and automatically download it locally.

4. Summary

Through the combination of Vue and Excel, we can easily implement batch editing and export of data. By reading Excel files and converting them into data, we can quickly import large amounts of data and perform batch editing through tables. At the same time, we can also export the edited data to Excel files to facilitate subsequent operations and analysis. The above is a detailed introduction to using Vue and Excel to batch edit and export data. I hope it can help everyone.

The above is the detailed content of How to use Vue and Excel to batch edit and export data. For more information, please follow other related articles on the PHP Chinese website!