零基础也能轻松实现vue表格数据导出，大幅提升工作效率

前言

当我们在进行数据分析或数据可视化时，经常需要将表格数据导出为 excel 格式。在 web 应用中，vue 是一种广泛使用的前端框架，因此使用 vue 实现导出表格数据是一个非常常见的需求。本文将介绍如何使用 vue 实现导出表格数据的功能，以便于大家在开发过程中更加便捷地处理表格数据。

---

先看实现效果

---

1.安装依赖

cnpm install -S file-saver xlsx
cnpm install -S script-loader

2.在公共组件中引入

import XLSX from "xlsx"
import FileSaver from 'file-saver'

3.使用

小案例

封装的公共组件

<template>
  <!-- // 导出按钮  -->
  <el-button type="success" icon="el-icon-upload" @click="exportEvent">导出</el-button>
</template>

<script>
// 引入导出插件
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  data() {
    return {};
  },
  //需要的参数
  props: {
    id: {
      type: String,
      default: "Table",
    },
    name: {
      type: String,
      default: "Table",
    },
  },
  methods: {
    // 导出Excel表格事件
    exportEvent() {
      let gatherData = { raw: true };
      let grid = XLSX.utils.table_to_book(
        document.querySelector("#" + this.id),
        gatherData
      );
      let workbook = XLSX.write(grid, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([workbook], {
            type: "application/octet-stream",
          }),
          this.name + ".xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, workbook);
      }
      return workbook;
    },
  },
};
</script>

---

使用的组件

<template>
  <div>
    <div>
      <derive :id="spreadsheet.id" :name="spreadsheet.name">导出</derive>
    </div>
    <div class="tableBox">
      <el-table :data="tableData" border :id="spreadsheet.id">
        <el-table-column align="center" prop="sqrq" label="申请日期"></el-table-column>
        <el-table-column align="center" prop="clpp" label="车辆品牌"></el-table-column>
        <el-table-column align="center" prop="clxh" label="车辆型号"></el-table-column>
        <el-table-column align="center" prop="vin" label="VIN码"></el-table-column>
        <el-table-column align="center" prop="scqy" label="生产企业"></el-table-column>
        <el-table-column align="center" prop="cllx" label="车辆类型"></el-table-column>
        <el-table-column align="center" prop="rlzl" label="燃油种类"></el-table-column>
        <el-table-column align="center" prop="obdlw" label="OBD联网"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import derive from "@/components/derive"; //引入公共组件
export default {
  data() {
    return {
      tableData: [], //要导出的表格数组
      spreadsheet: {
        id: "exportTable", //id
        name: "交易数据", //导出文件名
      },
    };
  },
  //注册组件
  components: {
    derive,
  },
};
</script>