Comment utiliser Vue et Excel pour modifier et exporter des données par lots

Comment utiliser Vue et Excel pour mettre en œuvre l'édition et l'exportation de données par lots

Dans le travail quotidien, nous avons souvent besoin d'éditer et d'exporter par lots de grandes quantités de données. Cette fonction peut être réalisée très facilement en combinant Vue avec Excel. Cet article donnera une introduction détaillée sur la façon d'utiliser Vue et Excel pour implémenter l'édition par lots et l'exportation de données, et joindra des exemples de code correspondants.

1. Préparation du projet

Tout d'abord, nous devons créer un projet Vue et introduire les bibliothèques de dépendances associées. Dans le projet vue-cli, vous pouvez installer les bibliothèques dépendantes requises en entrant la commande suivante dans le terminal :

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

2. Édition par lots des données

Dans le composant Vue, nous pouvons utiliser des tables pour afficher les données et effectuer le traitement par lots correspondant opérations d’édition. Voici un exemple de code simple :

<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>

Dans le code ci-dessus, les données sont lues et écrites à l'aide des méthodes read et write de la bibliothèque vue-xlsx Export. données vers et importer des données à partir de fichiers Excel. Parmi elles, la méthode exportData est utilisée pour exporter des données. Tout d'abord, utilisez utils.json_to_sheet pour convertir les données en une feuille de calcul, puis utilisez utils.book_append_sheet<.> pour convertir les données en feuille de calcul Ajoutez-les au classeur, et enfin convertissez le classeur en données binaires via <code>write, et appelez la méthode downloadExcel pour télécharger. La méthode importData est utilisée pour importer des données. Commencez par créer un élément d'entrée, définissez son type et les types de fichiers acceptés, puis convertissez le fichier Excel en tableau via FileReader en écoutant l'événement de changement du. élément d'entrée, et utiliser utils.readconvertit le tableau en classeur, puis convertit la première feuille du classeur en données JSON via utils.sheet_to_json et la met à jour dans le dataList du composant. read和write方法进行数据的读取和写入，实现了将数据导出为Excel文件和从Excel文件导入数据。其中，exportData方法用于导出数据，首先使用utils.json_to_sheet将数据转换为工作表，然后通过utils.book_append_sheet将工作表添加到工作簿中，最后通过write将工作簿转换为二进制数据，并调用downloadExcel方法进行下载。importData方法用于导入数据，首先创建一个input元素，设置其类型和接受的文件类型，然后通过监听input元素的change事件，通过FileReader将Excel文件转换为数组，并使用utils.read将数组转换为工作簿，然后通过utils.sheet_to_json将工作簿的第一个工作表转换为JSON数据，并更新到组件的dataList中。

三、数据的导出

除了批量编辑数据，我们还可以将数据导出为Excel文件。上述代码中已经实现了将数据导出为Excel文件的功能。通过点击"导出数据"按钮，会调用exportData

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!