vue:write-excel-file页面文字转为xlsx文件

**需求:**导出弹框内容全部数据,通常这种前端拿到全部数据的情况下做出的导出,无需跟分页列表一样向接口发起请求

实现:点击跳转github了解write-excel-file

下面说说vue3+ts项目中引入write-excel-file

1-安装引入

复制代码
npm install write-excel-file --save

2-引入并使用

更多导出列表文件配置参考write-excel-file

复制代码
<!-- 北斗卡详情 -->
<script setup lang="ts">
//引入!
import writeXlsxFile from 'write-excel-file';

// 是否正在导出
const isExporting = ref(false);
// 点击导出按钮
const onClickExport = useThrottleFn(async () => {
  isExporting.value = true;
  let schema = [
    {column: 'test1', type: String, value: v => v.platformName, width: 20},
    {column: 'test2', type: String, value: v => v.cardNo, width: 20},
    {column: 'test3', type: String, value: v => v.clientAccount, width: 20}
  ];
  // 具体使用------导出文件 简单配置!
  await writeXlsxFile(cardList.value, {
    schema,
    headerStyle: {
      backgroundColor: '#FAFAFA',
      fontWeight: 'bold'
    },
    fileName: '导出.xlsx'
  });
  isExporting.value = false;
});
</script>
相关推荐
正一品程序员6 小时前
vue项目引入GoogleMap API进行网格区域圈选
前端·javascript·vue.js
star_11127 小时前
Jenkins+nginx部署前端vue项目
前端·vue.js·jenkins
JIngJaneIL7 小时前
农产品电商|基于SprinBoot+vue的农产品电商系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·毕设·农产品电商系统
c***72747 小时前
SpringBoot + vue 管理系统
vue.js·spring boot·后端
JIngJaneIL7 小时前
书店销售|书屋|基于SprinBoot+vue书店销售管理设计与实现(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·毕设·书店销售管理设计与实现
一 乐7 小时前
农产品销售|农产品供销|基于SprinBoot+vue的农产品供销系统(源码+数据库+文档)
java·前端·javascript·数据库·vue.js·spring boot
一 乐8 小时前
助农服务系统|基于SprinBoot+vue的助农服务系统(源码+数据库+文档)
前端·数据库·vue.js
by__csdn8 小时前
Vue 2 与 Vue 3:深度解析与对比
前端·javascript·vue.js·typescript·vue·css3·html5
小二·8 小时前
DevUI 和 MateChat:2025 年,我们是怎么把前端开发变轻松的
开发语言·javascript·vue.js
一 乐8 小时前
游戏账号交易|基于Springboot+vue的游戏账号交易系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·后端·游戏