后端返回文件流，前端下载文件出现 “无法打开文件“ 错误

2024-07-17 12:47| 来源: 网络整理| 查看: 265

项目场景：

项目场景：前端实现下载功能。

问题描述

前端下载成功后，显示无法打开文件，而在postman上测试可以打开文件，如下图所示：

在这里插入图片描述前端下载的相关代码：

services 文件（此处为 get 请求）：

export async function download(params) { return request(`${Prefix}/userExam/download`, { params, }); }

utils 文件：

/** * 文件下载 * @param blobUrl blob源文件 * @param filename 下载的文件名 */ export function downloadFileByBlob(blobUrl: any, filename: string): void { const eleLink = document.createElement('a'); eleLink.download = filename; eleLink.style.display = 'none'; eleLink.href = blobUrl; // 触发点击 document.body.appendChild(eleLink); eleLink.click(); // 然后移除 document.body.removeChild(eleLink); URL.revokeObjectURL(blobUrl); }

下载方法：

上述代码完成后会出现“无法打开文件”的错误，下面是解决方案。

解决方案：

需要在请求时加上 responseType: ‘blob’，代码如下：

export async function download(params) { return request(`${Prefix}/userExam/download`, { responseType: 'blob', params, }); }

如上，便可解决。

ps: 此处贴上 Blob 下载文件时 type 类型大全

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章