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>
相关推荐
苹果酱056735 分钟前
redis系列--1.redis是什么
java·vue.js·spring boot·mysql·课程设计
琦遇2 小时前
Vue3使用AntvG6写拓扑图,可添加修改删除节点和边
前端·javascript·vue.js
南囝coding2 小时前
做Docx预览,一定要做这个神库!!
前端·vue.js·面试
樊小肆2 小时前
Vue3 在线 PDF 编辑 1.0 保存、下载
前端·vue.js
樊小肆2 小时前
Vue3 在线 PDF 编辑 1.0 文字、圆、矩形批注
前端·vue.js
李大2 小时前
uniapp怎么进行代码混淆
前端·javascript·vue.js
柚子8162 小时前
用transform给vue加点功能
前端·vue.js·vite
wordbaby2 小时前
Vue 图片重试指令 (v-img-retry) 增强:集成 visibility 控制,实现无缝加载过渡
前端·vue.js·http
ZhZhXuan3 小时前
micro-app环境下,子系统加载vxe-table样式被吞解决方法
vue.js
前端程序猿i3 小时前
Vue组件库开发实战:从0到1构建可复用的微前端模块
前端·javascript·vue.js