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>
相关推荐
前端切图崽_小郭15 小时前
虚拟滚动:静态 vs 动态的核心差异与实现?
vue.js
白鲸开源17 小时前
Apache SeaTunnel Zeta Engine 的 Basic Auth 是怎么工作的?
java·vue.js·github
卤蛋fg617 小时前
vue 甘特图 vxe-gantt 的使用(四):周视图的渲染
vue.js
卤蛋fg617 小时前
vue 甘特图 vxe-gantt 的使用(三):月视图的渲染
vue.js
卤蛋fg619 小时前
vue 甘特图 vxe-gantt 的使用(一):年视图的渲染
vue.js
前端开发爱好者20 小时前
支持 110 种文件预览!兼容 Vue、React、Svelte!
前端·javascript·vue.js
秋天的一阵风1 天前
Vue 3 里被严重低估的 API:InjectionKey
前端·javascript·vue.js
徐小夕2 天前
万字拆解 JitWord:企业级实时协同文档底层架构 + 大模型 AI 融合完整实践
前端·vue.js·github
用户83134859306982 天前
Cesium实现雾气效果:按钮一键控制打开/关闭雾气效果,滑块拖动实时控制雾气浓度
vue.js·cesium
锋行天下2 天前
如何用Vite实现Vue组件的按需打包和远程加载
前端·vue.js·前端框架