Vue と Excel を通じてデータを動的に更新および同期する方法

Vue と Excel を通じてデータを動的に更新および同期する方法

前書き:
日常の仕事や生活では、大量のデータを処理および管理する必要があることがよくあります。強力な表計算ソフトウェアとして、Excel は最も一般的に使用されるツールの 1 つになりました。しかし、リアルタイムのデータ更新が不十分であったり、共同編集が困難であったりするなど、Excelの限界も徐々に明らかになってきます。これらの問題を解決するために、Vue と Excel を組み合わせることで、データの動的な更新と同期を実現できます。この記事では、Vue と Excel を使用してこの関数を実装する方法を紹介し、参考として対応するコード例を示します。

ステップ 1: 準備
まず、必要なソフトウェアと環境を準備する必要があります。次のツールをインストールする必要があります。

1. Vue.js: ユーザー インターフェイスを構築するための JavaScript フレームワーク。主にフロントエンド ロジックの実装に使用されます。
2. Element-UI: Vue.js に基づくデスクトップ UI フレームワーク。ページの構築と設計を容易にする一連のコンポーネントを提供します。
3. ExcelJS: ブラウザーで Excel ファイルを読み書きするためのライブラリ。複数の形式での Excel ファイル操作をサポートします。

ステップ 2: Vue プロジェクトと Excel ファイルを作成する
次に、Vue プロジェクトを作成し、データ ストレージのソース ファイルとして Excel ファイルをプロジェクト ディレクトリに追加する必要があります。次のコマンドを使用して Vue プロジェクトを作成できます:

vue create excel-demo   // 创建Vue项目
cd excel-demo   // 进入项目目录

次に、Excel ソフトウェアを使用して Excel ファイルを作成し、「data.xlsx」という名前で保存し、ファイルの「public」ディレクトリに配置します。プロジェクト。

ステップ 3: 必要な依存関係パッケージをインストールする
プロジェクト ディレクトリに入ったら、2 つの依存関係パッケージ ExcelJS と Element-UI をインストールする必要があります。次のコマンドを使用してインストールできます。

npm install exceljs element-ui --save   // 安装ExcelJS和Element-UI

ステップ 4: コードを作成する
次に、コードの作成を開始します。まず、Vue プロジェクトの「src」ディレクトリに「components」という名前のフォルダーを作成し、そのフォルダー内に「Excel.vue」という名前のファイルを作成します。

Excel.vue ファイルで、次の作業を行う必要があります:

1. Element-UI コンポーネント ライブラリと ExcelJS ライブラリを導入します:

   <script>
   import { Button, Table, TableColumn } from 'element-ui';
   import ExcelJS from 'exceljs';
   ...
   </script>

2. コンポーネントの data オプションで必要なデータを定義します:

   data() {
     return {
    workbook: null,  // Excel工作薄对象
    worksheet: null,  // Excel工作表对象
    tableData: [],  // 表格数据
     }
   },

3. Excel ファイルを開いて保存するためのメソッドをコンポーネントのメソッド オプションに記述します 操作:

   methods: {
     openExcelFile() {
    const reader = new FileReader();
   
    // 读取Excel文件
    reader.onload = (e) => {
      const data = new Uint8Array(e.target.result);
   
      this.workbook = new ExcelJS.Workbook();
      this.workbook.xlsx.load(data).then(this.loadExcelData);
    }
   
    // 弹出文件选择框
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = '.xlsx';
   
    input.onchange = () => {
      const file = input.files[0];
      reader.readAsArrayBuffer(file);
    }
   
    input.click();
     },
     saveExcelFile() {
    const buffer = await this.workbook.xlsx.writeBuffer();
    const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const downloadLink = document.createElement('a');
    downloadLink.href = URL.createObjectURL(blob);
    downloadLink.download = 'data.xlsx';
    downloadLink.click();
     },
     loadExcelData() {
    this.worksheet = this.workbook.getWorksheet(1);
    const columns = this.worksheet.getRow(1).values;
    const rows = this.worksheet.getRows(2, this.worksheet.rowCount);
   
    this.tableData = rows.map(row => {
      const rowData = row.values;
      return rowData.reduce((obj, value, index) => {
        obj[columns[index]] = value;
        return obj;
      }, {});
    });
     },
     ...
   }

4. ページ レイアウトとテーブル コンポーネントのコードをコンポーネントのテンプレート オプションに記述します:

   <template>
     <div>
    <el-button type="primary" @click="openExcelFile">打开Excel文件</el-button>
    <el-button type="success" @click="saveExcelFile">保存Excel文件</el-button>
    <el-table :data="tableData">
      <el-table-column v-for="(value, key) in tableData[0]" :key="key" :label="key" :prop="key"></el-table-column>
    </el-table>
     </div>
   </template>

5. 最後に、コードをコンポーネントのスクリプト タグ内のコンポーネントをエクスポートします:

   export default {
     components: {
    Button,
    Table,
    TableColumn,
     },
     ...
   }
   </script>

ステップ 5: プロジェクトの実行
上記のステップを完了したら、プロジェクトを実行できます。プロジェクト ディレクトリで次のコマンドを実行します。

npm run serve

次に、ブラウザで http://localhost:8080 にアクセスすると、Excel ファイルを開いて保存するための機能を備えたページが表示されます。 「Excelファイルを開く」ボタンをクリックし、あらかじめ用意したExcelファイルを選択すると、そのExcelファイル内のデータがページ上に表示されます。データを修正・編集して「Excelファイルを保存」ボタンをクリックすると、データが自動的にExcelファイルに同期されます。

概要:
この記事では、Vue と Excel を介してデータを動的に更新および同期する方法を紹介します。 Vue と ExcelJS ライブラリを使用すると、Excel ファイルの読み取りと書き込みが簡単にでき、Excel ファイル内のデータを Vue ページにリアルタイムで表示できます。これにより、大量のデータをより迅速に処理および管理できるだけでなく、他のユーザーと簡単に共同作業してデータを編集できるため、作業効率とデータの精度が向上します。この記事が皆さんのお役に立てば幸いです!

以上がVue と Excel を通じてデータを動的に更新および同期する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。