Rakan kongsi emas Vue dan Excel: cara menapis dan mengeksport data secara dinamik

Rakan kongsi emas Vue dan Excel: cara menapis dan mengeksport data secara dinamik

Dengan perkembangan pesat teknologi Internet, bilangan dan fungsi aplikasi Web menjadi semakin kaya. Salah satu keperluan yang paling biasa ialah paparan dan eksport data. Di bawah rangka kerja bahagian hadapan seperti Vue.js, kami boleh melaksanakan penapisan dinamik dan eksport data dengan mudah. Untuk memenuhi keperluan pengguna dengan lebih baik, kami boleh memasangkannya dengan Excel untuk menyediakan operasi data dan fungsi analisis yang lebih berkuasa.

Artikel ini akan memperkenalkan cara menggunakan Vue.js untuk memaparkan data melalui jadual dan melaksanakan fungsi penapisan dan eksport dinamik. Dalam pelaksanaan khusus, kami akan menggunakan UI Elemen, perpustakaan komponen UI yang sangat baik dan xlsx, pustaka operasi fail Excel yang berkuasa.

1. Persediaan
   Pertama, kita perlu memasang Vue CLI dan mencipta projek Vue baharu. Dalam direktori projek, jalankan arahan berikut:

   npm install -g @vue/cli
   vue create excel-demo
   cd excel-demo

   Kemudian, pilih konfigurasi lalai.

Seterusnya, kita perlu memasang UI Elemen dan xlsx. Dalam direktori projek, jalankan arahan berikut:

npm install element-ui xlsx

2. Untuk melaksanakan paparan data
   Dalam direktori src, buat folder bernama views dan buat fail bernama Home.vue di dalamnya. Kemudian, kita boleh mula mengedit fail Home.vue.

Mula-mula, perkenalkan komponen dan gaya yang diperlukan:

<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>

3. Eksport data
   Dalam direktori src/utils, buat fail bernama exportExcel.js. Kemudian, kita boleh mula mengedit fail 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();
}

Selepas melengkapkan langkah di atas, kami boleh menjalankan projek Vue kami dan mengalami fungsi penapisan dinamik dan mengeksport data.

Ringkasan
Melalui perkongsian emas Vue.js dan Excel, kami boleh melaksanakan penapisan dinamik dan pengeksportan data dengan mudah. Dalam aplikasi sebenar, kami boleh mengembangkan dan mengoptimumkan lagi fungsi ini mengikut keperluan khusus untuk menyediakan pengalaman pengguna dan keupayaan analisis data yang lebih baik. Saya harap artikel ini dapat membantu anda, terima kasih kerana membaca!

Lampiran
Kod contoh lengkap boleh didapati dalam Github saya: [https://github.com/example/repo](https://github.com/example/repo)

Atas ialah kandungan terperinci Rakan kongsi emas Vue dan Excel: cara menapis dan mengeksport data secara dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!