Building an Excel Data Merging Tool with Python Flask and Vue.js

Project overview: The article describes building an efficient Excel data merging tool to simplify processing large numbers of Excel files. It uses Python Flask for the backend and Vue.js for the frontend, providing features such as Excel template download, batch file upload, a data processing progress bar, and display of the merged file path after completion.

Preparation: Ensure Python, Flask, and Vue.js are installed. Install required dependencies: Flask, Flask-CORS, and pandas.

Project structure: backend/ contains app.py and templates/index.html; frontend/ includes src/components/FileUploader.vue, ProgressBar.vue, views/Home.vue, App.vue, public/template.xlsx, package.json, and vue.config.js.

Backend implementation: Key Flask routes are defined. For template download: from flask import Flask, send_from_directory app = Flask(__name__) @app.route('/download_template') def download_template(): return send_from_directory('frontend/public', 'template.xlsx', as_attachment=True) For batch upload: from flask import request, jsonify @app.route('/upload_files', methods=['POST']) def upload_files(): files = request.files.getlist('files') # TODO: handle file upload logic, e.g., save files, read data return jsonify({'message': '文件上传成功'})

Frontend implementation: FileUploader.vue provides a file input and upload button; ProgressBar.vue shows a progress bar controlled by a progress prop; Home.vue integrates these components and handles the upload‑success event to trigger data merging.

FileUploader.vue template and script: <template> <div> <input type="file" multiple @change="handleFileUpload" /> <button @click="uploadFiles">上传文件</button> </div> </template>

ProgressBar.vue template, script, and style: <template> <div> <div>{{ progress }}%</div> <div class="progress-bar"> <div :style="{ width: progress + '%' }"></div> </div> </div> </template>

Home.vue template and script: <template> <div> <h2>Excel数据合并工具</h2> <file-uploader @upload-success="handleUploadSuccess" /> <progress-bar :progress="progress" v-if="showProgressBar" /> <div v-if="mergedFilePath">合并后文件路径：{{ mergedFilePath }}</div> </div> </template>

Running the project: In one terminal run: $ cd backend $ pip install flask flask-cors pandas $ python app.py In another terminal run: $ cd frontend $ npm install $ npm run serve Then visit http://localhost:8080 to see the tool in action.

Conclusion: The tool enables Excel template download, batch upload, progress tracking, and display of the merged file path, streamlining data processing workflows and improving efficiency.