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>
相关推荐
雪碧聊技术13 分钟前
登录页【电影画风视频背景】实现
vue.js·视频背景·video标签
指尖跳动的光29 分钟前
判断页签是否为活跃状态
前端·javascript·vue.js
嚣张丶小麦兜2 小时前
认识vite
前端·javascript·vue.js
Awu12273 小时前
Vue3自定义渲染器:原理剖析与实践指南
前端·vue.js·three.js
进击的野人3 小时前
Vue.js 插槽机制深度解析:从基础使用到高级应用
前端·vue.js·前端框架
用户4099322502123 小时前
Vue3 v-if与v-show:销毁还是隐藏,如何抉择?
前端·vue.js·后端
JimmyWhat3 小时前
Vue单页应用路由404问题:服务器配置与Hash模式解决方案
vue.js
JIngJaneIL3 小时前
基于springboot + vue健康管理系统(源码+数据库+文档)
java·开发语言·数据库·vue.js·spring boot·后端
计算机毕设VX:Fegn08955 小时前
计算机毕业设计|基于springboot + vue医院挂号管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
快乐星球喂6 小时前
子组件和父组件之间优雅通信---松耦合
前端·vue.js