Excelのアップロード・分析・エクスポート機能をフロントエンドでvueを使って実現する方法

Vue を使用して Excel のアップロード、分析、エクスポート機能を実装するには、次の手順を実行する必要があります。

依存関係をインストールする

まず、Excel ファイルの読み取りとエクスポートのために、xlsx とファイルセーバーの 2 つのライブラリをインストールする必要があります。Vue プロジェクトで次のコマンドを実行できます。

npm install xlsx file-saver --save

アップロードコンポーネントの書き込み

次に、アップロードコンポーネントを次のように記述する必要があります。

<template>
  <div>
    <input type="file" @change="onFileChange" />
    <button @click="exportFile">导出Excel</button>
  </div>
</template>

<script>
import XLSX from 'xlsx';
import FileSaver from 'file-saver';

export default {
      
      
  name: 'ExcelUpload',
  methods: {
      
      
    onFileChange(event) {
      
      
      const file = event.target.files[0];

      const reader = new FileReader();
      reader.onload = (event) => {
      
      
        const binaryData = event.target.result;
        const workbook = XLSX.read(binaryData, {
      
       type: 'binary' });

        // 处理Excel文件，比如将数据保存到 Vuex 中
      };
      reader.readAsBinaryString(file);
    },
    exportFile() {
      
      
      // 从 Vuex 中获取数据并处理成 XLSX 的工作表数据
      const workbook = XLSX.utils.book_new();
      const worksheet = XLSX.utils.json_to_sheet(/* Excel 数据 */);
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

      // 导出 Excel 文件
      const buffer = XLSX.write(workbook, {
      
       type: 'buffer', bookType: 'xlsx' });
      FileSaver.saveAs(new Blob([buffer], {
      
       type: 'application/octet-stream' }), 'example.xlsx');
    },
  },
};
</script>

このコンポーネントには、ファイル選択ボックスとエクスポートボタンが含まれています。ユーザーが Excel ファイルを選択してアップロードすると、を使用してFileReaderバイナリデータをメモリに読み取り、XLSXライブラリを使用して Excel ファイルを解析し、何らかの処理を実行します。メソッドonFileChangeは、アップロードされた Excel ファイルを処理するためのコードです。

Excel でのデータの操作

Excelファイルをアップロードした後、Vuexにデータを保存するなどの加工が必要です。この例では、読み取ったデータを Vuex の状態に保存できます。

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
    
    
  state: {
    
    
    excelData: null,
  },
  mutations: {
    
    
    setExcelData(state, data) {
    
    
      state.excelData = data;
    },
  },
});

次に、ファイルをアップロードするときに、解析されたデータを Vuex に保存できます。

onFileChange(event) {
    
    
  const file = event.target.files[0];

  const reader = new FileReader();
  reader.onload = (event) => {
    
    
    const binaryData = event.target.result;
    const workbook = XLSX.read(binaryData, {
    
     type: 'binary' });

    // 将 Excel 数据保存到 Vuex 中
    const worksheet = workbook.Sheets[workbook.SheetNames[0]];
    const data = XLSX.utils.sheet_to_json(worksheet, {
    
     header: 1 });
    this.$store.commit('setExcelData', data);
  };
  reader.readAsBinaryString(file);
},

Excelファイルのエクスポート

最後に、Excel ファイルをエクスポートする必要があります。ライブラリを使用してXLSXデータを Excel シートに変換し、file-saverライブラリを使用してそれをエクスポートできます。この例では、データを Vuex に保存し、エクスポートボタンをクリックしたときに Excel ファイルに書き込みます。

exportFile() {
    
    
  const data = this.$store.state.excelData;

  // 处理数据，将其转换为 XLSX 工作表数据

  const workbook = XLSX.utils.book_new();
  const worksheet = XLSX.utils.json_to_sheet(/* Excel 数据 */);
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

  // 导出文件
  const buffer = XLSX.write(workbook, {
    
     type: 'buffer', bookType: 'xlsx' });
  FileSaver.saveAs(new Blob([buffer], {
    
     type: 'application/octet-stream' }), 'example.xlsx');
},

以上はVueを利用してExcelのアップロード・分析・エクスポートを実現しました

Excelのアップロード・分析・エクスポート機能をフロントエンドでvueを使って実現する方法

Excelのアップロード・分析・エクスポート機能をフロントエンドでvueを使って実現する方法

おすすめ