Vue と Excel のゴールデンパートナー: データを動的にフィルターしてエクスポートする方法-Vue.js-php.cn

Vue と Excel のゴールデンパートナー: データを動的にフィルターしてエクスポートする方法

王林

リリース： 2023-07-21 16:29:59

オリジナル

922 人が閲覧しました

Vue と Excel のゴールデンパートナー: 動的フィルタリングとデータのエクスポートを実現する方法

インターネット技術の急速な発展に伴い、Web アプリケーションの数と機能はますます豊富になってきています。最も一般的なニーズの 1 つは、データの表示とエクスポートです。 Vue.js のようなフロントエンドフレームワークでは、動的フィルタリングとデータのエクスポートを簡単に実装できます。ユーザーのニーズにさらに応えるために、Excel と組み合わせて、より強力なデータ操作および分析機能を提供できます。

この記事では、Vue.js を使用してテーブルを通じてデータを表示し、動的フィルターとエクスポート機能を実装する方法を紹介します。具体的な実装では、優れた UI コンポーネントライブラリである Element UI と、強力な Excel ファイル操作ライブラリである xlsx を使用します。

準備
まず、Vue CLI をインストールし、新しい Vue プロジェクトを作成する必要があります。プロジェクトディレクトリで、次のコマンドを実行します。
```
npm install -g @vue/cli
vue create excel-demo
cd excel-demo
```
ログイン後にコピー
次に、デフォルト構成を選択します。

次に、Element UI と xlsx をインストールする必要があります。プロジェクトディレクトリで、次のコマンドを実行します。

npm install element-ui xlsx

ログイン後にコピー

データ表示の実装
src ディレクトリに、views という名前のフォルダを作成し、そのドキュメント内に Home.vue という名前のフォルダを作成します。次に、Home.vue ファイルの編集を開始できます。

最初に、必要なコンポーネントとスタイルを導入します。

<template>
  <div class="home">
    <el-row>
      <el-col :span="6">
        <h3>数据过滤</h3>
        <el-input v-model="keyword" placeholder="请输入关键字"></el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <h3>数据展示</h3>
        <el-table :data="filteredData" border>
          <el-table-column prop="id" label="ID"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="age" label="年龄"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-button type="primary" icon="el-icon-download" @click="exportData">导出数据</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { exportJsonToExcel } from "@/utils/exportExcel.js";

export default {
  data() {
    return {
      keyword: ""
    };
  },
  computed: {
    ...mapState(["data"]),
    filteredData() {
      return this.data.filter(item =>
        item.name.includes(this.keyword)
      );
    }
  },
  methods: {
    exportData() {
      exportJsonToExcel(this.filteredData, "data");
    }
  }
};
</script>

<style scoped>
h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}
</style>

ログイン後にコピー

データエクスポート
src/utils ディレクトリに、exportExcel.js という名前のファイルを作成します。次に、exportExcel.js ファイルの編集を開始できます。

import XLSX from "xlsx";

export function exportJsonToExcel(json, fileName) {
  const data = json.map(item => {
    return {
      ID: item.id,
      姓名: item.name,
      年龄: item.age
    };
  });

  const worksheet = XLSX.utils.json_to_sheet(data);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
  const excelBuffer = XLSX.write(workbook, {
    bookType: "xlsx",
    type: "array"
  });
  saveAsExcel(excelBuffer, fileName);
}

function saveAsExcel(buffer, fileName) {
  const data = new Blob([buffer], { type: "application/octet-stream" });
  const link = document.createElement("a");
  link.href = URL.createObjectURL(data);
  link.download = fileName + ".xlsx";
  link.click();
}

ログイン後にコピー

上記の手順を完了したら、Vue プロジェクトを実行して、動的フィルタリングとデータのエクスポートの機能を体験できます。

概要
Vue.js と Excel の黄金のパートナーシップを通じて、データの動的フィルタリングとエクスポートを簡単に実装できます。実際のアプリケーションでは、特定のニーズに応じてこれらの機能をさらに拡張および最適化し、より優れたユーザーエクスペリエンスとデータ分析機能を提供できます。この記事があなたのお役に立てれば幸いです、読んでいただきありがとうございます!

付録
完全なサンプルコードは、私の Github にあります: [https://github.com/example/repo](https://github.com/example/repo)

以上がVue と Excel のゴールデンパートナー: データを動的にフィルターしてエクスポートする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。