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>
相关推荐
老毛肚12 小时前
软件测试期末考试
vue.js
杨若瑜13 小时前
本地开发环境慢?localhost的锅!
vue.js
xsbcme17 小时前
VueTabRouter 插件实践(一):多标签页不是一排 TabBar
vue.js
云水一下19 小时前
Vue.js从零到精通系列(三):组件化基础——Props、Emits、插槽与生命周期
前端·javascript·vue.js
英勇无比的消炎药21 小时前
少踩坑TinyVue插槽事件编码规范详解
vue.js
2401_868534781 天前
5G和4G接入网对比介绍
vue.js
chushiyunen1 天前
vue export default
前端·javascript·vue.js
北极星日淘1 天前
可买免税店货物与安耐晒——特殊商品代购技术方案
javascript·vue.js·elementui
youyu-youyu1 天前
oss阿里云图片链接url高清图片设置为缩略图 vue 减少加载体积流量
前端·javascript·vue.js·阿里云·云计算
低保和光头哪个先来1 天前
聊聊 CSS 编译和 scoped 实现
前端·css·vue.js