Vue でカスタムフィールドを含む Excel ファイルをインポートする方法-フロントエンドQ&A-php.cn

Vue でカスタムフィールドを含む Excel ファイルをインポートする方法

PHPz

リリース： 2023-04-26 16:17:59

オリジナル

787 人が閲覧しました

インターネット技術の継続的な発展に伴い、大量のデータを管理および分析する必要がある企業がますます増えており、そのデータの多くは Excel の形式で存在します。 Vue ベースの Web アプリケーションでは、通常、データ分析やデータアプリケーションのために Excel ファイルをインポートする必要があります。 Vue には Excel ファイルをインポートできるライブラリが多数ありますが、通常、Excel ファイルのデータ形式は必ずしも必要な形式を満たしていないため、データの統合と分析に適応するようにインポートされた Excel データのフィールドをカスタマイズする必要があります。この記事では、Vue でカスタムフィールドを Excel ファイルにインポートする方法を紹介します。

Excel ファイルのインポート

Vue アプリケーションでは、通常、いくつかのサードパーティライブラリを使用して Excel ファイルをインポートします。これらのツールには、ExcelJS、Xlsx などが含まれます。この記事では、ExcelJS を例として、Vue を使用して Excel ファイルをインポートする方法を紹介します。まず、ExcelJS 依存関係パッケージをインストールする必要があります:

npm install exceljs --save

ログイン後にコピー

次に、ExcelJS を Vue コンポーネントにインポートします:

import ExcelJS from 'exceljs';

ログイン後にコピー

その後、ExcelJS を使用して Excel ファイルをロードする必要があります。実行する JavaScript FileReader オブジェクト。

export default {
  name: 'ImportExcel',
  data() {
    return {};
  },
  methods: {
    handleImportExcel(file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const result = e.target.result;
        const workbook = new ExcelJS.Workbook();
        workbook.xlsx.load(result).then((book) => {
          // 处理Workbook对象
        });
      };
      reader.readAsArrayBuffer(file);
    },
  },
};

ログイン後にコピー

この例では、Excel ファイルの読み取りを処理するために handleImportExcel メソッドを定義し、 new FileReader() を通じて新しい FileReader オブジェクトを作成し、Excel ファイルを ArrayBuffer タイプ (コンテンツ) として読み取ります。エンコード形式の問題。

ExcelJS は、xlsx、xls、csv、ods などの複数のファイル形式をサポートしています。ここでは、load() メソッドを使用して Excel ファイルの内容を読み取り、Excel にインポートするカスタム列の初期データである Workbook オブジェクトを返します。

カスタマイズされたインポート列

Excel ファイルを正常にインポートした後、データの統合を続行する前に、データをカスタム列でフィルターして処理する必要があります。このプロセスは、データのニーズを満たすために Vue の計算プロパティまたはフィルターを使用して実装できます。

export default {
  name: 'ImportExcel',
  data() {
    return {};
  },
  methods: {
    handleImportExcel(file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const result = e.target.result;
        const workbook = new ExcelJS.Workbook();
        workbook.xlsx.load(result).then((book) => {
          const worksheet = book.worksheets[0];
          const headers = [];
          worksheet.eachRow((row) => {
            if (row.number === 1) {
              row.eachCell((cell) => {
                headers.push(cell.value);
              });
            }
          });
          const data = [];
          worksheet.eachRow((row, rowNumber) => {
            if (rowNumber > 1) {
              const rowData = {};
              row.eachCell((cell, colNumber) => {
                const colName = headers[colNumber - 1];
                rowData[colName] = cell.value;
              });
              data.push(rowData);
            }
          });
          this.$emit('add-data', data);
        });
      };
      reader.readAsArrayBuffer(file);
    },
  },
};

ログイン後にコピー

この例では、ExcelJS メソッドを使用して Excel ファイル内のワークシートオブジェクトを読み取ります。次に、ヘッダー配列を作成し、ワークシートオブジェクトの eachRow() メソッドを通じて Excel ファイルのヘッダーを調べ、ヘッダーの各セルの値をヘッダー配列に保存しました。次に、 eachRow() メソッドと eachCell() メソッドを通じて、Excel の行と列を走査し、行内の各セルのデータを headers 配列に対応させ、結果を rowData オブジェクトに格納します。最後に、rowData がデータ配列に保存され、最後にデータが Vue の $emit() メソッドを通じて親コンポーネントに渡されます。

カスタム列のレンダリング

Excel ファイルが正常にインポートされたら、カスタム列を使用してデータを自由にフィルタリングおよび処理できます。 Vue では、計算されたプロパティまたはフィルターを使用して、データのカスタム処理を実装できます。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in filteredData" :key="index">
        <td>{{ row.id }}</td>
        <td>{{ row.name }}</td>
        <td>{{ row.age }}</td>
        <td>{{ row.gender }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: "CustomFields",
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    headers() {
      const firstRow = this.data[0];
      return Object.keys(firstRow);
    },
    filteredData() {
      return this.data.map((item) => {
        return {
          id: item.ID,
          name: item.Name,
          age: item.Age,
          gender: item.Gender === "M" ? "男" : "女",
        };
      });
    },
  },
};
</script>

ログイン後にコピー

この例では、計算された属性ヘッダーを通じて渡されたデータヘッダーの情報を取得します。 filteredData では、データの各行のカスタム列をフィルタリングして処理し、ID、名前、年齢、性別などの元のフィールドに対して二次処理を実行します。

概要

この記事では、VueWeb アプリケーションに Excel ファイルをインポートする方法と、インポートされたデータをカスタム列で処理する方法を紹介します。 ExcelJS ツールライブラリを使用して Excel ファイルの内容を読み取り、Vue コンポーネントの計算プロパティまたはフィルターを使用して、インポートされた Excel のカスタム列処理を実装します。これらのテクノロジーにより、Excel ファイルデータをより効率的かつ柔軟に処理および使用できるようになります。

以上がVue でカスタムフィールドを含む Excel ファイルをインポートする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。