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>
相关推荐
honkun642 分钟前
vue 表格组件 vxe-table 修改滚动条样式,修改滚动条样式,统一宽度、颜色与自动隐藏
前端·javascript·vue.js
171320330计算机毕设编程2 小时前
计算机毕业设计 基于springboot+vue的在线观鸟视频播放网站 LW PPT
java·大数据·vue.js·spring boot·算法·课程设计
海阳皓辰网络科技有限公司4 小时前
Vue3 冷库货位选择器:三级联动、扫码带出与批次混放校验
前端·vue.js
爱喝水的小周6 小时前
实验十三 Vue 过渡与动画—电商后台消息中心实现
前端·javascript·vue.js
溪语流沙9 小时前
【Web全栈进阶】文件上传与图片展示:早报站的第一张图片
前端·vue.js·python·fastapi
流烟默1 天前
SSE 实战:在 SpringBoot + Vue 项目中零依赖实现轻量级实时消息推送
vue.js·spring boot·后端·sse
执子念的飞鱼1 天前
纯前端预览 275 种文件格式是怎么做到的
前端·vue.js·react.js
vx_Biye_Design1 天前
PHP中医养生馆预约系统60841-计算机课程设计、毕业设计
vue.js·spring boot·后端·mysql·php·课程设计·express
gc_22992 天前
Vue框架学习(1:环境搭建)
vue.js
我的div丢了肿么办2 天前
element-plus表格使用:filter-method过滤导致出现无数据
前端·javascript·vue.js