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

npm install element-ui xlsx

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

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();
}