vue2+element实现前端导出

水杯和键盘

已于 2023-04-06 14:46:41 修改

阅读量190

点赞数

文章标签：前端 vue.js npm

于 2023-04-06 14:30:36 首次发布

本文链接：https://blog.csdn.net/m0_59715578/article/details/129988680

版权

1、引入xlsx、file-save

npm install xlsx --save
npm install file-saver --save

2、在具体模块引入xlsx和 file-saver

import FileSaver from "file-saver";
import * as XLSX from "xlsx";

3、完整代码

<template>
  <div>
    <el-button type="primary" @click="exportExcel">导出文件</el-button>
 
    <el-table :data="tableData" style="width: 100%" id="out-table">
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="age" label="年龄" width="80"></el-table-column>
      <el-table-column prop="date" label="日期"></el-table-column>
    </el-table>
  </div>
</template>
  
  
<script>
//引入安装的依赖
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
export default {
  data() {
    return {
      tableData: [
        {
          name: "张三",
          age: 22,
          date: "2016-05-02"
        },
        {
          name: "王小虎",
          age: 23,
          date: "2016-05-04"
        }
      ]
    };
  },
  methods: {
    // XLSX.uitls.table_to_book( 放入的是table 的DOM 节点 ) ，sheetjs.xlsx 即为导出表格的名字，可修改！
    exportExcel() {
      let wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
      let wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      FileSaver.saveAs(
        new Blob([wbout], { type: "application/octet-stream" }),
        "用户列表.xlsx"
      );
 
      return wbout;
    }
  }
};
</script>
  
<style scoped>
</style>

4、参考

Vue2中导出Excel_vue导出excel文件_疆~的博客-CSDN博客