vue3中的excel表导出功能(选中导出或导出所有,也可支持vue2)

1.安装模块

npm install xlsx file-saver -S

2.文件导入

import * as XLSX from "xlsx";

import FileSaver from "file-saver"

3.整体代码(可选中导出或导出所有)

复制代码
<template>
  <div>
    
     <el-button type="warning" @click="down" >文件导出</el-button>

    <el-table  :data="tableData" stripe style="width: 100%">
      <el-table-column prop="date" label="日期" width="180" />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="address" label="地址" />
    </el-table>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import * as XLSX from "xlsx";
import FileSaver from "file-saver"
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];

// 定义文件名
let name=ref("人员统计")
const down=()=>{
   //选中导出时可更改此处数组
    const selectedData = tableData.slice(0,2);
  // 构建导出的表格数据
  const exportData = [
    { date: "日期", name: "姓名", address: "地址" },
    ...selectedData
  ];
    // 注意表格上绑定id,获取dom元素
 const worksheet = XLSX.utils.json_to_sheet(exportData, { skipHeader: true });
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
  const workbookOutput = XLSX.write(workbook, { bookType: "xlsx", type: "array" });
    try {
    //  name.value+".xlsx"   name是文件名,后缀拼接一个excel的文件后缀名  
      FileSaver.saveAs(new Blob([workbookOutput], { type: 'application/octet-stream' }), name.value+".xlsx")
    } catch (e) {
      console.log(e) 
    }
}

</script>
<style lang="less"></style>

id绑定表格全部导出

复制代码
<template>
  <div>
    <el-button type="warning" @click="down">文件导出</el-button>

    <el-table id="table" :data="tableData" stripe style="width: 100%">
      <el-table-column prop="date" label="日期" width="180" />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="address" label="地址" />
    </el-table>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import * as XLSX from "xlsx";
import FileSaver from "file-saver";
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];

// 定义文件名
let name = ref("人员统计");
const down = () => {
  // 注意表格上绑定id,获取dom元素
  var sel = XLSX.utils.table_to_book(document.getElementById("table"), {
    raw: true,
  });
  var selIn = XLSX.write(sel, {
    bookType: "xlsx",
    bookSST: true,
    type: "array",
  });
  try {
    //  name.value+".xlsx"   name是文件名,后缀拼接一个excel的文件后缀名
    FileSaver.saveAs(
      new Blob([selIn], { type: "application/octet-stream" }),
      name.value + ".xlsx"
    );
  } catch (e) {
    console.log(e, selIn);
  }
  return selIn;
};
</script>
<style lang="less"></style>

4.效果如下

相关推荐
上单带刀不带妹19 分钟前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志21 分钟前
typescript结构化类型应用两例
javascript
杨进军40 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
gnip1 小时前
总结一期正则表达式
javascript·正则表达式
爱分享的程序员2 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘2 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出2 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的2 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
南屿im2 小时前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
西陵3 小时前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构