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>
相关推荐
活宝小娜几秒前
新增和编辑共用弹窗模板
开发语言·前端·javascript·vue.js
阳光的男夹克7 分钟前
Vue3 Element-plus 封装Select下拉复选框选择器
javascript·vue.js·ecmascript
IT毕设实战小研37 分钟前
Java毕业设计选题推荐 |基于SpringBoot的健身爱好线上互动与打卡社交平台系统 互动打卡小程序系统
java·开发语言·vue.js·spring boot·vue·毕业设计·课程设计
IT毕设实战小研13 小时前
基于SpringBoot的救援物资管理系统 受灾应急物资管理系统 物资管理小程序
java·开发语言·vue.js·spring boot·小程序·毕业设计·课程设计
weixin_4569042714 小时前
Vue3入口文件main.js解析
前端·javascript·vue.js
前端领航者14 小时前
重学Vue3《Vue Watch 监听器深度指南:场景、技巧与底层优化原理剖析》
前端·vue.js
neon120414 小时前
Vue 3 父子组件通信核心机制详解:defineProps、defineEmits 与 defineExpose 完全指南
前端·javascript·vue.js·前端框架
Ciito14 小时前
vue+moment将分钟调整为5的倍数(向下取整)
javascript·vue.js
一点一木15 小时前
Vue Vapor 事件机制深潜:从设计动机到源码解析
前端·vue.js·vapor
小高00716 小时前
🔥10 个被忽视的 Vue3 API 开发利器,用过 5 个才算真正入门
前端·javascript·vue.js