项目场景：

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

问题描述

前端下载成功后，显示无法打开文件，而在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);
}

下载方法：

const Download = async () => {
    const res: Blob = await download(params); // res 即为后端返回的文件流
    if (res) {
      const fileBlob = new Blob([res], { // 需要修改类型，此处 type 类型对应 .xlsx
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',  
      });
      downloadFileByBlob(URL.createObjectURL(fileBlob), 'xx模板.xlsx');
    }
  };

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

解决方案：

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

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

如上，便可解决。

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

项目场景：

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

问题描述

前端下载成功后，显示无法打开文件，而在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);
}

下载方法：

const Download = async () => {
    const res: Blob = await download(params); // res 即为后端返回的文件流
    if (res) {
      const fileBlob = new Blob([res], { // 需要修改类型，此处 type 类型对应 .xlsx
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',  
      });
      downloadFileByBlob(URL.createObjectURL(fileBlob), 'xx模板.xlsx');
    }
  };

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

解决方案：

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

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

如上，便可解决。

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