VueとExcelの暗黙の連携：データの一括変更とエクスポートを実現する方法-Vue.js-php.cn

Vue と Excel 間の暗黙の連携: データのバッチ変更とエクスポートを実装する方法

Excel は、データ管理と処理の点で常に一般的に使用されるツールです。フロントエンド技術の発展に伴い、人気のある JavaScript フレームワークとしての Vue も、データの表示と処理において優れたパフォーマンスを発揮します。この記事では、VueとExcelを組み合わせてデータの一括変更とエクスポートを実現する方法を紹介します。

関連するテクノロジスタックは次のとおりです。

Vue.js: ユーザーインターフェイスの構築に使用されるフロントエンド JavaScript フレームワーク。
vue-xlsx: Excel ファイルを処理するための便利な Vue コンポーネント。
xlsx: Excel ファイルを解析および生成するための JavaScript ライブラリ。

ステップ 1: 関連する依存関係をインストールする

まず、プロジェクトのルートディレクトリでコマンドラインターミナルウィンドウを開き、次のコマンドを実行します。

npm install vue-xlsx xlsx

ログイン後にコピー

インストール後これらのモジュールを Vue のエントリファイルに導入する:

import Vue from 'vue'; import VueXlsx from 'vue-xlsx'; Vue.use(VueXlsx);

ログイン後にコピー

ステップ 2: データ表示コンポーネントを作成する

次に、データを表示して一括変更するための Vue コンポーネントを作成します。学生の名前、年齢、学年を含む学生情報のテーブルがあるとします。StudentListという名前のコンポーネントを作成できます:

姓名	年龄	成绩
{{ student.name }}	{{ student.age }}	{{ student.score }}

ログイン後にコピー

上記のコードでは、v-forディレクティブを使用して、ループ内で学生リストをレンダリングします。「データのエクスポート」ボタンをクリックすると、生徒データをExcelファイルに変換してエクスポートします。 Excel ファイルを選択した後、FileReaderを通じてファイルを解析し、解析されたデータを対応する処理関数に渡します。

ステップ 3: Excel ファイルを開きます

Excel ファイルの操作を容易にするために、Vue のプロトタイプチェーンを拡張し、グローバルメソッドを作成する必要があります$xlsx。 Vue エントリファイルに次のコードを追加できます。

import xlsx from 'xlsx'; Vue.prototype.$xlsx = { export(data, filename) { const ws = xlsx.utils.aoa_to_sheet(data); const wb = xlsx.utils.book_new(); xlsx.utils.book_append_sheet(wb, ws, 'Sheet1'); xlsx.writeFile(wb, filename); }, parse(data) { const wb = xlsx.read(data, { type: 'binary' }); const ws = wb.Sheets[wb.SheetNames[0]]; return xlsx.utils.sheet_to_json(ws, { header: 1 }); }, };

ログイン後にコピー

上記のコードでは、xlsxライブラリの関連メソッドを使用して Excel ファイルを処理します。$xlsx.exportメソッドはデータを Excel ファイルにエクスポートし、$xlsx.parseメソッドは Excel ファイルを解析するために使用されます。

ステップ 4: 依存関係をインストールしてプロジェクトを実行する

最後に、コマンドラインターミナルウィンドウで次のコマンドを実行して、プロジェクトの依存関係をインストールし、プロジェクトを実行します: