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.效果如下

相关推荐
10年前端老司机4 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
晓13139 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
烛阴10 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
军军君0110 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具四:后端项目基础框架搭建下
spring boot·spring·面试·elementui·typescript·uni-app·mybatis
chao_78911 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼11 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
阳火锅12 小时前
Vue 开发者的外挂工具:配置一个 JSON,自动造出一整套页面!
javascript·vue.js·面试
每天吃饭的羊12 小时前
react中为啥使用剪头函数
前端·javascript·react.js
多啦C梦a13 小时前
【适合小白篇】什么是 SPA?前端路由到底在路由个啥?我来给你聊透!
前端·javascript·架构
薛定谔的算法13 小时前
《长安的荔枝·事件流版》——一颗荔枝引发的“冒泡惨案”
前端·javascript·编程语言