掘金上没怎么翻到有uniapp导出excel的文章,可能是低级了吧,嘻嘻,那我还是小小记录一下吧
平常我们在web端导出excel是这样的:
function exportToExcel() {
// 构建Excel数据,这里假设您已经准备好了Excel数据,以二维数组的形式表示
const data = [
['姓名', '年龄', '性别'],
['张三', 25, '男'],
['李四', 30, '女'],
];
// 创建一个Workbook对象
const workbook = XLSX.utils.book_new();
// 创建一个Worksheet对象,并将数据填充到Worksheet中
const worksheet = XLSX.utils.aoa_to_sheet(data);
// 将Worksheet添加到Workbook中
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
// 将Workbook转换为Excel文件的二进制数据
const excelData = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
// 创建Blob对象
const blob = new Blob([excelData], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
// 创建下载链接
const downloadUrl = URL.createObjectURL(blob);
// 创建一个<a>标签并设置相关属性
const link = document.createElement('a');
link.href = downloadUrl;
link.download = 'exported_file.xlsx'; // 设置下载文件的文件名
// 模拟点击下载链接进行下载
link.click();
// 释放URL对象
URL.revokeObjectURL(downloadUrl);
}
而uniapp上不对外提供document api,接下来按照uniapp提供的api写一个导出excel
<template>
<view>
<button @click="download">download</button>
<button @click="getSavedFile">获取已保存文件</button>
</view>
</template>
<script>
export default {
methods: {
getSavedFile() {
//获取已经保存的文件
uni.getSavedFileList({
success: function (res) {
console.log(res.fileList)
//获取已保存文件的详细信息
res.fileList.forEach(v => {
uni.getSavedFileInfo({
filePath: v.filePath, // 仅做示例用,非真正的文件路径
success: function (res) {
console.log(res.size)
console.log(res.createTime)
}
})
})
}
})
},
download() {
uni.downloadFile({
url: "http://192.168.0.100:3001/export-files",
success: res => {
if (res.statusCode === 200) {
// saveFile将临时文件保存到本地
uni.saveFile({
tempFilePath: res.tempFilePath,
success: saveRes => {
// 在这里可以处理保存成功后的逻辑,例如展示保存成功的提示或打开保存的文件等
uni.showToast({
title: `文件保存成功:${saveRes.savedFilePath}`,
icon: "success"
})
},
fail: saveErr => {
uni.showToast({
title: "文件保存失败",
icon: "none"
})
}
})
}
},
fail: err => {
console.log("下载失败", err)
}
})
}
}
}
</script>
写好了前端,我需要测试导出是不是好使的,那怎么办?那自己写一个node服务
const { Sequelize, DataTypes } = require('sequelize');
const express = require('express');
const cors = require('cors');
const XLSX = require('xlsx');
const app = express();
// 添加 CORS 中间件
app.use(cors());
const sequelize = new Sequelize('pachong2', 'root', '123456', {
dialect: 'mysql', // 根据你的数据库类型进行相应的配置
host: '127.0.0.1',
});
const File = sequelize.define('File', {
name: {
type: DataTypes.STRING,
allowNull: false,
},
// ... 其他文件属性
});
app.get('/export-files', async (req, res) => {
try {
const files = await File.findAll();
// 构建 Excel 数据
const workbook = XLSX.utils.book_new();
const worksheet = XLSX.utils.json_to_sheet(files.map(file => file.toJSON()));
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
// 将 Excel 数据转换为二进制数据
const excelData = XLSX.write(workbook, { bookType: 'xlsx', type: 'buffer' });
// 设置响应头,告诉前端接收的是 Excel 文件
// 设置响应头,告诉前端接收的是 Excel 文件,并指定文件名
const fileName = 'exported_files.xlsx';
res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
res.setHeader('Content-Disposition', `attachment; filename="${fileName}"`);
// 禁用缓存
res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
res.setHeader('Pragma', 'no-cache');
res.setHeader('Expires', '0');
// 发送生成的 Excel 文件给前端
res.send(excelData);
} catch (error) {
console.error('Export files failed:', error);
res.status(500).json({ error: 'Export files failed' });
}
});
const PORT = 3001;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
ok,点击之后好使啦