投标文档生成器-CSDN博客

本文链接：https://blog.csdn.net/Leon_Jinhai_Sun/article/details/147310467

文件上传并下载Word文档的前端实现

下面是一个完整的前端页面实现，可以上传文件到指定接口并下载返回的Word文档：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成投标文档</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        .container {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 20px;
            margin-top: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="file"] {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 100%;
            box-sizing: border-box;
        }
        select {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 100%;
            box-sizing: border-box;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #45a049;
        }
        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
        .status {
            margin-top: 15px;
            padding: 10px;
            border-radius: 4px;
        }
        .loading {
            color: #31708f;
            background-color: #d9edf7;
            border: 1px solid #bce8f1;
        }
        .error {
            color: #a94442;
            background-color: #f2dede;
            border: 1px solid #ebccd1;
        }
        .success {
            color: #3c763d;
            background-color: #dff0d8;
            border: 1px solid #d6e9c6;
        }
    </style>
</head>
<body>
    <h1>生成投标文档</h1>
    <div class="container">
        <div class="form-group">
            <label for="file">选择文件:</label>
            <input type="file" id="file" accept=".doc,.docx,.pdf,.txt">
        </div>
        <div class="form-group">
            <label for="modelTag">模型版本:</label>
            <select id="modelTag">
                <option value="1.5">1.5版本</option>
                <!-- 可以添加更多选项 -->
            </select>
        </div>
        <button id="submitBtn" onclick="generateDocument()">生成文档</button>
        <div id="status" class="status" style="display: none;"></div>
    </div>

    <script>
        function generateDocument() {
            const fileInput = document.getElementById('file');
            const modelTag = document.getElementById('modelTag').value;
            const submitBtn = document.getElementById('submitBtn');
            const statusDiv = document.getElementById('status');
            
            // 验证文件是否已选择
            if (!fileInput.files || fileInput.files.length === 0) {
                showStatus('请选择要上传的文件', 'error');
                return;
            }
            
            const file = fileInput.files[0];
            
            // 准备表单数据
            const formData = new FormData();
            formData.append('file', file);
            formData.append('model_tag', modelTag);
            
            // 禁用按钮并显示加载状态
            submitBtn.disabled = true;
            showStatus('正在生成文档，请稍候...', 'loading');
            
            // 发送请求
            fetch('http://10.80.0.230:6060/generator_bid_document/', {
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应不正常');
                }
                return response.blob();
            })
            .then(blob => {
                // 创建下载链接
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                
                // 尝试从响应头获取文件名，如果没有则使用默认名
                const contentDisposition = response.headers.get('content-disposition');
                let filename = 'bid_document.docx';
                if (contentDisposition) {
                    const matches = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(contentDisposition);
                    if (matches && matches[1]) {
                        filename = matches[1].replace(/['"]/g, '');
                    }
                }
                
                a.download = filename;
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(url);
                document.body.removeChild(a);
                
                showStatus('文档生成成功，已开始下载', 'success');
            })
            .catch(error => {
                console.error('Error:', error);
                showStatus('生成文档失败: ' + error.message, 'error');
            })
            .finally(() => {
                submitBtn.disabled = false;
            });
        }
        
        function showStatus(message, type) {
            const statusDiv = document.getElementById('status');
            statusDiv.textContent = message;
            statusDiv.className = 'status ' + type;
            statusDiv.style.display = 'block';
        }
    </script>
</body>
</html>