代码：
/** * 下载质量体系文件，实现 SQL Server image 类型文件下载，使用 get 请求 * @param fileNo 文件编号（可能包含非安全字符，如：4.2 2人员v∕V/v+DW=dw，其中空格、全角斜杠∕、半角斜杠/、加号+、非ASCII字符（如中文、日文等），这些字符为非安全字符，在URL中都会被编码传输） * @returns 文件流 {@link Blob} */ export const qualityFileDownloadFileService = (fileNo: string) => { // 1、预先不处理 fileNo // 2、发送请求时，将 4.2 人员∕/vVv+DW=dw 编码为 4.2+2%E4%BA%BA%E5%91%98v%E2%88%95V%2Fv%2BDW%3Ddw，其中空格编码为+ // 3、最终发送请求Request URL为：http://localhost:5173/api/resources/qualityFile/downloadFile?fileNo=4.2+2%E4%BA%BA%E5%91%98v%E2%88%95V%2Fv%2BDW%3Ddw // 4、后端通过@RequestParam接收数据时会自动将URL中的 4.2+2%E4%BA%BA%E5%91%98v%E2%88%95V%2Fv%2BDW%3Ddw 解码为 4.2 2人员v∕V/v+DW=dw // 5、后端不需要再额外处理 return request.get("/resources/qualityFile/downloadFile", { params: { fileNo: fileNo }, // 响应类型为 blob，用于接收二进制数据流 responseType: "blob" }); }; /** * 下载质量体系文件，实现 SQL Server image 类型文件下载，使用 get 请求，并且使用 encodeURIComponent 对文件编号进行编码处理 * @param fileNo 文件编号（可能包含非安全字符，如：4.2 2人员v∕V/v+DW=dw，其中空格、全角斜杠∕、半角斜杠/、加号+、非ASCII字符（如中文、日文等），这些字符为非安全字符，在URL中都会被编码传输） * @returns 文件流 {@link Blob} */ export const qualityFileDownloadFileWithGetByEncodeService = (fileNo: string) => { // 1、预先处理 fileNo，使用 encodeURIComponent 将 4.2 2人员v∕V/v+DW=dw，编码为 4.2%202%E4%BA%BA%E5%91%98v%E2%88%95V%2Fv%2BDW%3Ddw，其中空格编码为%20 // 2、发送请求时，将 4.2%202%E4%BA%BA%E5%91%98v%E2%88%95V%2Fv%2BDW%3Ddw 编码为 4.2%25202%25E4%25BA%25BA%25E5%2591%2598v%25E2%2588%2595V%252Fv%252BDW%253Ddw，主要是将%编码为%25 // 3、最终发送请求Request URL为：http://localhost:5173/api/resources/qualityFile/downloadFileWithGetByEncode?fileNo=4.2%25202%25E4%25BA%25BA%25E5%2591%2598v%25E2%2588%2595V%252Fv%252BDW%253Ddw // 4、后端先通过@RequestParam接收数据时会自动将URL中的 4.2%25202%25E4%25BA%25BA%25E5%2591%2598v%25E2%2588%2595V%252Fv%252BDW%253Ddw 解码为 4.2%202%E4%BA%BA%E5%91%98v%E2%88%95V%2Fv%2BDW%3Ddw // 5、后端再通过 UriUtils 进行解码处理，将 4.2%202%E4%BA%BA%E5%91%98v%E2%88%95V%2Fv%2BDW%3Ddw 解码为 4.2 2人员v∕V/v+DW=dw const encodedFileNo = encodeURIComponent(fileNo); return request.get("/resources/qualityFile/downloadFileWithGetByEncode", { params: { fileNo: encodedFileNo }, // 响应类型为 blob，用于接收二进制数据流 responseType: "blob" }); };这两种API的设计是为了解决不同场景下的URL编码问题，特别是在处理特殊字符时的兼容性需求。以下是主要原因：
1.编码处理方式不同
第一种API (qualityFileDownloadFileService)
不进行预编码：依赖axios/请求库的自动编码
空格处理：自动编码为
+后端处理：Spring Boot会自动解码，无需额外处理
第二种API (qualityFileDownloadFileWithGetByEncodeService)
主动编码：使用
encodeURIComponent()预编码空格处理：编码为
%20后端处理：需要手动二次解码
2.兼容性考虑
场景1：标准REST API（第一种）
javascript
// 适用场景：现代框架、Spring Boot标准配置 // 优点：简洁，符合REST规范 // 缺点：某些旧系统可能无法正确处理+号
场景2：旧系统或特殊编码需求（第二种）
javascript
// 适用场景： // 1. 旧版后端系统 // 2. 需要与前端JavaScript标准编码保持一致 // 3. 与其他系统（非Java）集成时
3.特殊字符处理差异
示例：4.2 2人员v∕V/v+DW=dw
第一种API的编码结果：
空格 →
+/→%2F中文 →
%E4%BA%BA%E5%91%98发送：
4.2+2%E4%BA%BA%E5%91%98v%E2%88%95V%2Fv%2BDW%3Ddw
第二种API的编码结果：
空格 →
%20/→%2F双重编码：
%→%25发送：
4.2%25202%25E4%25BA%25BA%25E5%2591%2598v%25E2%2588%2595V%252Fv%252BDW%253Ddw
4.实际应用建议
推荐使用第一种API
javascript
// 理由： // 1. 更简洁，无需手动编码 // 2. 符合大多数现代框架的约定 // 3. Spring Boot能正确处理自动解码 // 4. 减少编码错误可能性 // 使用示例 const downloadFile = async (fileNo: string) => { try { const response = await qualityFileDownloadFileService(fileNo); // 处理blob响应 } catch (error) { console.error('下载失败', error); } };第二种API的适用场景
javascript
// 仅在以下情况使用： // 1. 后端明确要求手动编码 // 2. 与其他系统集成时编码规则不一致 // 3. 处理特定字符集问题 // 示例：需要与Node.js或其他后端系统保持编码一致时 const downloadWithEncode = async (fileNo: string) => { // 确保编码方式与其他系统匹配 return qualityFileDownloadFileWithGetByEncodeService(fileNo); };5.最佳实践总结
typescript
// 统一建议： // 1. 新项目使用第一种API // 2. 保持前后端编码规则一致 // 3. 在API文档中明确说明编码要求 // 4. 考虑使用POST方式传输复杂参数 // 如果遇到编码问题，可以考虑： export const qualityFileDownloadFileService = (fileNo: string) => { // 统一使用URLSearchParams处理特殊字符 const params = new URLSearchParams(); params.append('fileNo', fileNo); return request.get("/resources/qualityFile/downloadFile", { params, responseType: "blob" }); };结论：第一种API是推荐的标准做法，第二种API主要用于特定兼容性场景。在设计API时，应该优先考虑标准的、简化的工作流程，减少不必要的编码解码环节。
