我正在参加 「掘金日新计划 · 4 月更文挑战」，本文主要对element ui 表格数据如何下载进行讲解。

table数据下载

要导出 Vue Element UI 表格的内容，可以使用以下步骤：

1. 安装 xlsx 和 file-saver 库。
2. 在表格中添加一个“导出”按钮，并在其上绑定一个点击事件。
3. 在点击事件处理程序中使用 SheetJS 库将表格数据转换为 Excel 文件格式。
4. 使用 file-saver 库将生成的 Excel 文件保存到本地。

下面是一个简单的示例代码，说明如何实现表格的导出功能：

<template>
  <div>
    <el-button type="primary" @click="exportTable">导出</el-button>
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import XLSX from 'xlsx';
import FileSaver from 'file-saver';

export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, address: '北京市' },
        { name: '李四', age: 20, address: '上海市' },
        { name: '王二', age: 17, address: '上海市' },
        { name: '麻子', age: 22, address: '深圳市' }
      ]
    };
  },
  methods: {
    exportTable() {
      const worksheet = XLSX.utils.json_to_sheet(this.tableData);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
      const excelBuffer = XLSX.write(workbook, {
        bookType: 'xlsx',
        type: 'array'
      });
      const blob = new Blob([excelBuffer], { type: 'application/vnd.ms-excel' });
      FileSaver.saveAs(blob, 'table'); // 下载文件 文件名
    }
  }
};
</script>

这个示例代码中使用了 xlsx 库将表格数据转换为 Excel 文件格式，然后使用 file-saver 库将生成的 Excel 文件保存到本地。

可以得到文件

文件下载

要在 Vue 中实现文件下载，可以使用以下步骤：

1. 请求下载文件地址
2. 定义一个form表单，在页面进行隐藏
3. 将表单放置在web 中

下面是一个示例代码，展示如何在 Vue 中实现文件下载：

<template>
  <div>
    <el-button type="primary" @click="downloadFile">下载文件</el-button>
  </div>
</template>

<script>

export default {
  methods: {
    downloadFile() {
        var _this = this;
        var action = "/api/download"
        // 定义一个form表单
        var form = $("<form>");
        form.attr("style","display:none");
        form.attr("target","") ;
        form.attr("method" "post");
        form.attr("action"action);
        // 将表单放置在web 中
        $("body").append(form) ;
        // 表单提交
        form.submit():
        form.remove():
    }
  }
};
</script>

这个示例代码中，在点击“下载文件”按钮时，会执行 downloadFile 函数。其中，使用 axios 请求服务器上的文件，定义一个form表单，将表单放置在web 中，实现文件下载

❤️ 谢谢支持

以上便是本次分享的全部内容，希望对你有所帮助^_^

如果你有任何想法和疑问，欢迎留言～ 一起探讨

点赞收藏不迷路