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>
相关推荐
乆夨(jiuze)37 分钟前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
xiguolangzi2 小时前
vue3+element-plus el-table列的显隐、列宽 持久化
前端·javascript·vue.js
大猩猩X2 小时前
vxe-upload vue 实现附件上传、手动批量上传附件的方式
vue.js·vxe-ui
come112343 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
海天胜景5 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼5 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
百锦再5 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5555 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
木头没有瓜6 小时前
vscode离线安装插件
ide·vue.js·vscode