优化 MERN Stack Web 应用程序中大型 Excel 文件的处理和存储

解决方案 1：将 Excel 文件作为 JSON 存储在 MongoDB 中（前端和后端）

该解决方案使用一种基本方法，我们在前端将 Excel 数据转换为 JSON 并将其存储在 MongoDB 中。此脚本有助于处理小文件，但可能无法很好地处理大文件（超过 16MB）。它非常适合可扩展性不成问题的基本设置。

// Frontend: Handle File Upload and Convert to JSONconst handleFileUpload = (event) => {    const file = event.target.files[0];    if (file) {        const reader = new FileReader();        reader.onload = async (e) => {            const data = new Uint8Array(e.target.result);            const workbook = XLSX.read(data, { type: 'array' });            const json = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);                        // Send JSON data to backend            await fetch('/api/uploadExcel', {                method: 'POST',                headers: { 'Content-Type': 'application/json' },                body: JSON.stringify({ fileData: json })            });        };        reader.readAsArrayBuffer(file);    }};// Backend: Express API to Store Data in MongoDBconst express = require('express');const mongoose = require('mongoose');const app = express();mongoose.connect('mongodb://localhost:27017/exceldb', { useNewUrlParser: true, useUnifiedTopology: true });const fileSchema = new mongoose.Schema({ data: Array });const File = mongoose.model('File', fileSchema);app.use(express.json());app.post('/api/uploadExcel', async (req, res) => {    try {        const newFile = new File({ data: req.body.fileData });        await newFile.save();        res.status(200).send('File uploaded successfully!');    } catch (error) {        res.status(500).send('Error uploading file');    }});app.listen(5000, () => {    console.log('Server running on port 5000');});

解决方案2：使用GridFS在MongoDB中存储大型Excel文件

在这种方法中，我们使用 GridFS 将大型 Excel 文件作为块存储在 MongoDB 中。这使我们能够处理大于 16MB 的文件。存储文件后，前端检索它并将其转换为 JSON 进行处理。

// Frontend: Handle File Upload Using FormDataconst handleFileUpload = async (event) => {    const file = event.target.files[0];    if (file) {        const formData = new FormData();        formData.append('file', file);                // Send file to backend        await fetch('/api/uploadExcel', {            method: 'POST',            body: formData        });    }};// Backend: Express API to Store Excel File in GridFSconst express = require('express');const mongoose = require('mongoose');const multer = require('multer');const { GridFSBucket } = require('mongodb');const app = express();mongoose.connect('mongodb://localhost:27017/exceldb', { useNewUrlParser: true, useUnifiedTopology: true });const storage = multer.memoryStorage();const upload = multer({ storage: storage });app.post('/api/uploadExcel', upload.single('file'), (req, res) => {    const bucket = new GridFSBucket(mongoose.connection.db, { bucketName: 'excelFiles' });    const uploadStream = bucket.openUploadStream(req.file.originalname);    uploadStream.end(req.file.buffer);        res.status(200).send('File uploaded successfully!');});// Backend: Retrieve and Convert Excel File to JSONapp.get('/api/getExcel/:filename', (req, res) => {    const bucket = new GridFSBucket(mongoose.connection.db, { bucketName: 'excelFiles' });    const downloadStream = bucket.openDownloadStreamByName(req.params.filename);    const chunks = [];    downloadStream.on('data', (chunk) => chunks.push(chunk));    downloadStream.on('end', () => {        const buffer = Buffer.concat(chunks);        const workbook = XLSX.read(buffer, { type: 'buffer' });        const json = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);        res.json(json);    });});app.listen(5000, () => {    console.log('Server running on port 5000');});

解决方案 3：服务器端处理以优化性能

该解决方案通过将 JSON 转换从前端转移到后端来提高性能。这可确保前端不会受到大文件处理时间的影响，并允许更快地转换大型数据集的文件。

// Backend: Express API to Handle File Conversion and Calculationconst express = require('express');const mongoose = require('mongoose');const { GridFSBucket } = require('mongodb');const XLSX = require('xlsx');const app = express();mongoose.connect('mongodb://localhost:27017/exceldb', { useNewUrlParser: true, useUnifiedTopology: true });app.post('/api/uploadExcel', upload.single('file'), (req, res) => {    const bucket = new GridFSBucket(mongoose.connection.db, { bucketName: 'excelFiles' });    const uploadStream = bucket.openUploadStream(req.file.originalname);    uploadStream.end(req.file.buffer);        res.status(200).send('File uploaded successfully!');});// Backend: Retrieve, Convert, and Process Excel Fileapp.get('/api/getProcessedExcel/:filename', (req, res) => {    const bucket = new GridFSBucket(mongoose.connection.db, { bucketName: 'excelFiles' });    const downloadStream = bucket.openDownloadStreamByName(req.params.filename);    const chunks = [];    downloadStream.on('data', (chunk) => chunks.push(chunk));    downloadStream.on('end', () => {        const buffer = Buffer.concat(chunks);        const workbook = XLSX.read(buffer, { type: 'buffer' });        const sheet = workbook.Sheets[workbook.SheetNames[0]];        const json = XLSX.utils.sheet_to_json(sheet);                // Process data to calculate sum, average, etc.        const processedData = json.map(row => ({            ...row,            sum: row.values.reduce((a, b) => a + b, 0),            average: row.values.reduce((a, b) => a + b, 0) / row.values.length        }));        res.json(processedData);    });});app.listen(5000, () => {    console.log('Server running on port 5000');});

有关在 MERN Stack 中处理大型 Excel 文件的常见问题

1. 存储大文件时如何避免 MongoDB 中的 BSON 大小限制？
2. 要绕过 MongoDB 中的 BSON 大小限制，您可以使用 GridFS，它允许您以块的形式存储大文件，从而有效地处理超过 16MB BSON 大小限制的文件。
3. 处理大型 Excel 文件时优化前端性能的最佳实践是什么？
4. 为了优化前端性能，可以考虑将文件处理和计算任务转移到后端。这将减少客户端浏览器的负载，确保更流畅的用户体验。
5. 如何提高将大型 Excel 文件转换为 JSON 的速度？
6. 加快转换过程的一种方法是将文件分成更小的块并异步处理它们。此外，利用高效的库或使用后端服务进行转换可以显着减少所需的时间。
7. 有没有办法处理大型 Excel 文件的实时计算？
8. 可以通过使用服务器端处理数据聚合（总和、平均值、最大值、最小值）来执行实时计算。这将减少在前端处理数据所花费的时间并提高响应能力。
9. 存储经常访问的大型 Excel 文件的最佳方法是什么？
10. 如果您的 Excel 文件很大并且需要频繁访问， GridFS 是一个绝佳的选择。它通过将文件分割成更小的、可管理的块来确保高效的存储和检索。
11. 我可以在我的 Web 应用程序中对大型 Excel 文件实现分页吗？
12. 是的，实施分页有助于优化性能。您可以获取并处理较小的数据子集，这使得应用程序响应更快并减少初始加载时间。
13. MongoDB GridFS 如何改进大型 Excel 文件的处理？
14. GridFS 以小块的形式存储文件，从而可以存储大于 MongoDB 16MB 限制的文件。这在处理 Excel 文件等大型数据集时特别有用。
15. 处理大型 Excel 文件时应采取哪些步骤来防止超时？
16. 为了防止超时，您可以将文件处理分解为较小的任务，使用后台工作程序或队列进行处理，并优化服务器端代码以有效地处理数据。
17. 处理大型 Excel 文件时如何减少前端内存使用量？
18. 为了减少前端内存使用量，您可以对 Excel 文件实现流式处理和分块，一次处理文件的较小部分，而不是一次将所有内容加载到内存中。

优化 MERN Stack 应用程序中的大型 Excel 文件处理

要在 MERN 堆栈应用程序中高效存储和检索大型 Excel 文件，您应该考虑使用 网格文件系统 用于 MongoDB，它处理大于 16MB BSON 大小限制的文件。将 Excel 文件直接转换为 JSON 并存储它们可能会导致性能瓶颈，尤其是在处理大型数据集时。将文件处理和计算转移到后端将减少前端负载并为用户提供更快的处理时间。

此外，在前端实现数据分块和分页等技术可以确保在任何给定时间仅处理数据的可管理部分。这可以减少内存消耗并有助于防止超时。通过优化后端存储和前端数据处理，您的 MERN stack Web 应用程序可以有效扩展以处理具有数千行的大型 Excel 文件。 🚀