uni-app 小程序导出为excel

发布于 1周前 作者 wuwangju 来自 Uni-App

uni-app 小程序导出为excel

1 回复

uni-app 中导出数据为 Excel 文件,可以通过结合前端和后端的方式来实现。由于小程序环境限制,前端直接生成和下载 Excel 文件并不现实,因此通常的做法是将数据发送到后端服务器,由后端生成 Excel 文件并提供下载链接。

以下是一个简单的示例,展示如何在 uni-app 中实现这一功能。

前端(uni-app)

  1. 发送数据到后端
// 假设你有一个数据数组 dataToExport
const dataToExport = [
    { name: '张三', age: 25, gender: '男' },
    { name: '李四', age: 30, gender: '女' },
    // 更多数据...
];

uni.request({
    url: 'https://your-backend-server.com/export/excel', // 后端导出接口
    method: 'POST',
    data: {
        data: dataToExport
    },
    success: (res) => {
        if (res.statusCode === 200 && res.data.url) {
            // 提示用户点击链接下载
            uni.showModal({
                title: '提示',
                content: `点击下载Excel文件: ${res.data.url}`,
                showCancel: false,
                success: () => {
                    uni.setClipboardData({
                        data: res.data.url,
                        success: () => {
                            uni.showToast({
                                title: '链接已复制',
                                icon: 'success'
                            });
                        }
                    });
                }
            });
        } else {
            uni.showToast({
                title: '导出失败',
                icon: 'none'
            });
        }
    },
    fail: () => {
        uni.showToast({
            title: '请求失败',
            icon: 'none'
        });
    }
});

后端(Node.js + Express 示例)

  1. 后端生成 Excel 并提供下载链接
const express = require('express');
const multer = require('multer');
const xlsx = require('xlsx');
const path = require('path');
const fs = require('fs');

const app = express();
const upload = multer();

app.post('/export/excel', upload.none(), (req, res) => {
    const data = req.body.data;
    const ws = xlsx.utils.json_to_sheet(data);
    const wb = xlsx.utils.book_new();
    xlsx.utils.book_append_sheet(wb, ws, 'Sheet1');

    const filePath = path.join(__dirname, 'exports', 'export.xlsx');
    xlsx.writeFile(wb, filePath);

    res.json({ url: `http://your-backend-server.com/downloads/${path.basename(filePath)}` });
});

app.get('/downloads/:filename', (req, res) => {
    const filePath = path.join(__dirname, 'exports', req.params.filename);
    res.download(filePath, (err) => {
        if (err) {
            console.error('File download error:', err);
        } else {
            // Optionally delete the file after download
            fs.unlinkSync(filePath);
        }
    });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

注意:确保后端服务器有处理文件上传和下载的能力,并且前端和后端的接口地址正确配置。这个示例展示了基本的流程,实际应用中可能需要根据具体需求进行调整。

回到顶部