在Vue 3中，可以使用第三方库xlsx来实现将表格数据导出为Excel文件。以下是一个简单的例子：
- 安装
xlsx库：
npm install xlsx file-saver- 在Vue组件中使用
xlsx库：
import { ref } from 'vue';
import { saveAs } from 'file-saver';
import * as XLSX from 'xlsx';
export default {
setup() {
const tableData = ref([
{ name: '张三', age: 30, email: 'zhangsan@example.com' },
{ name: '李四', age: 24, email: 'lisi@example.com' },
// ...更多数据
]);
const exportToExcel = () => {
// 表格标题
const ws_name = 'Sheet1';
// 表头中文名
const header = {
"姓名": 'name',
"年龄": 'age',
"邮箱": 'email'
};
// 表格数据
const data = tableData.value.map((row) => {
return {
name: row.name,
age: row.age,
email: row.email
};
});
// 工作表
const ws = XLSX.utils.json_to_sheet(data, { header });
// 生成工作簿
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, ws_name);
// 生成Excel文件
const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
// 字符串转ArrayBuffer
function s2ab(s) {
const buf = new ArrayBuffer(s.length);
const view = new Uint8Array(buf);
for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
// 下载文件
saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), 'data.xlsx');
};
return {
tableData,
exportToExcel
};
}
};- 在模板中添加按钮来触发导出：
<template>
<button @click="exportToExcel">导出Excel</button>
</template>这段代码定义了一个exportToExcel函数，它会遍历表格数据，将其转换为Excel可以理解的格式，并最终通过saveAs函数提供下载功能。用户点击按钮时，将触发该函数，并提示用户下载Excel文件。