Vue3前端xlsx导出

全局注册

1. 在main.ts内引入

import * as XLSX from 'xlsx'
// 如果需要设置样式，则引入xlsx-style
import XLSXStyle from 'xlsx-style'if (typeof window !== 'undefined') {window.QUOTE = '"'
}

2.在index.html内加入

<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>

页面使用

1. 在 template 页面写入按钮导出方法

<template><el-button type="success" plain @click="handleExport" v-hasPermi="['report:cost:export']"><Icon icon="ep:download" class="mr-5px" /> 导出</el-button>// 表格<el-table ref="exportOnlyTableRef" :data="onlyList" height="640" style="margin: 10px"><el-table-column label="项目" align="center" :width="150"><template #default="scope">{{ scope.row[0] }}</template></el-table-column><!-- 动态生成年份和月份列 --><el-table-column:label="onlyMonthList.regionName"align="center"class="year-column-margin"><el-table-columnv-for="(storeItem, storeIndex) in onlyMonthList.costDataResList":key="storeIndex":label="storeItem.month"align="center"><template #default="scope">{{ scope.row[1 + storeIndex] }}</template></el-table-column></el-table-column></el-table>
</template>

2. 在 script 内写入导出方法

<script lang="ts" setup>
import * as XLSX from 'xlsx'
/** 导出按钮操作 */
const handleExport = async () => {if (costList.value.length > 0) {const tableDom = exportOnlyTableRef.value?.$el // 与 el-table 里面的 ref 属性匹配if (!tableDom) {return}const wb = XLSX.utils.table_to_book(tableDom)XLSX.writeFile(wb, `费用_${new Date().getTime()}.xls`)} else {return message.error(t('暂无数据无法导出！'))}
}
</script>