前端实现下载文件（包含压缩包下载）方式汇总

默认最简单的下载方式是：window.open(后台接口API路径)，但该方法弊端：（1）因是新开窗口方式，前端展示上，每次会闪下。（2）safari浏览器不会下载，会显示乱码。

此外，如果使用window.open(文件URL)方式：

• pdf、office文档、psd：直接下载。
• 图片、txt：新开窗口预览，不会下载；且txt预览，有时出现中文乱码问题。

一、后台返回文件URL

实现原理：通过a标签实现下载。

/**
 * @method 下载单个文件（文件类型可任意：.png、txt、office文档、.psd等）
 * @param { String } url - 文件的http完整路径, 如：http: //xxx.png
 * @param { String } fileName - 文件名，注意是要带文件后缀名，如：xxx.png
 * @doc https://blog.csdn.net/weixin_39547158/article/details/110851570
 */
export function downloadFile(url: string, fileName: string) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.upload.onprogress = (e) => {
      if (e.lengthComputable) {
        let progress = e.loaded / e.total;
        console.log('文件上传进度是', progress);
      }
    };
    xhr.onload = function () {
      const url = window.URL.createObjectURL(xhr.response);
      const eleLink = document.createElement('a');
      eleLink.href = url;
      eleLink.download = `${fileName}`;
      eleLink.style.display = 'none';
      document.body.appendChild(eleLink);
      eleLink.click();
      document.body.removeChild(eleLink);
      resolve('success');
    };
    xhr.onerror = (e) => {
      console.log('请求错误回调', e);
      message.warning('下载文件失败')
      reject(e);
    };
    xhr.send();
  });
}

二、后台返回Blob文件流

实现原理：调用后台接口（需设置接口响应类型是blob），返回blob文件流, 前端使用file-saver库实现下载。

方式一：通过a标签下载

// 导出问卷
export function resultDownloadApi(params: Record<string, any>) {
  return axiosPost({ url: '/api/admin/Result/export', params}, {
    responseType: "blob", // 必须设置接口响应类型是blob（否则下载的表格文件打不开）
  });
}

const exportData = (id: string | number): void => {
  resultDownloadApi({
    subjectId: id
  }).then(async (result: Blob) => {
    // 返回错误信息，后台返回的是：Blob {size: 54, type: 'application/json'}
    if (result.type === 'application/json') {
      // 方式一：使用blob对象内置的text方法
      const resText = await result.text();
      const rspObj = JSON.parse(resText);
      ElMessage.error(rspObj.msg); // element-plus组件
      /* 方式二：通过fileReader方式获取后台报错信息
      const fileReader = new FileReader();
      fileReader.readAsText(result, 'utf-8');
      fileReader.onload = () => {
        const result = JSON.parse(fileReader.result as string);
        if (result.code === 500 || result.code === 1) {
          ElMessage.warning(result.msg); 
        }
      };
      */
    } else {
      // 返回表格数据，后台返回的是：Blob {size: 4381, type: 'application/force-download'}
      const blob = new Blob([result], { type: 'application/x-msdownload' }); // 创建 Blob 对象
      const url = URL.createObjectURL(blob); // 创建 URL 对象
      const link = document.createElement('a'); // 创建链接
      link.href = url;
      link.download = '问卷.xlsx';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url); // 释放 URL 对象
    }
  });
};

方式二： file-saver第三方库下载 

// 下载excel文件
import FileSaver from 'file-saver';

const downloadTemplate = async () => {
  try {
    const params = { ... } // 传参
    const res = await generateDownStreamReconciliationUsingGET(params);
    // res为返回结果
    if (res) {
      const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
      FileSaver.saveAs(blob, '对账单.xlsx');
      console.log('对账单下载成功')
    }
  } catch (e) {
    console.log(e);
  } finally {
    console.log('finally')
  }
};

// 生成对账excel模板表格API
export async function generateDownStreamReconciliationUsingGET(
  params: API.generateDownStreamReconciliationUsingGETParams,
  options?: { [key: string]: any },
) {
  return request<any>(
    `${process.env.APP_HOST_WAYBILL}/xxx/generateDownStreamReconciliation`,
    {
      method: 'GET',
      responseType: 'blob',  // 必须写该行，否则：后台返回的是string，不是blob且文件下载后，会出现打不开问题。
      params: {
        ...params,
      },
      ...(options || {}),
    },
  );
}

三、多文件URL下载，前端生成压缩包下载

实现原理：jszip库 + file-saver库

import { getBlobOfUrl } from '@/services/common';
import { saveAs } from 'file-saver';
import JSZip from 'jszip';
import { message } from 'antd';

/**
 * @method 同时下载多文件,并生成一个压缩包
 * @param { Object[] } fileInfoList - 文件列表
 * @param { String } urlField - 文件URL的字段名
 * @param { String } fileNameField - 文件名的字段名
 * @param { String } folderName - 压缩包 & 文件夹名称
 */
export function downloadAsZip(
  fileInfoList: any[],
  folderName = '文件压缩包',
  urlField = 'filePath',
  fileNameField = 'name',
) {
  return new Promise((resolve, reject) => {
    const zip = new JSZip();
    // const folder = zip.folder(folderName); // 创建文件夹
    const promisesList = fileInfoList.map((item) => {
      return getBlobOfUrl(item[urlField])
        .then((data) => {
          // console.log(data); // Blob
          // folder.file(item[fileNameField], data, { binary: true }); // 往文件夹中存放文件
          zip.file(item[fileNameField], data, { binary: true }); // 不创建文件夹
        })
        .catch((e) => {
          console.log(e);
          message.warning(e?.message || '获取文件流失败')
        });
    });
    Promise.all(promisesList)
      .then(() => {
        zip
          .generateAsync({ type: 'blob' })
          .then((content) => {
            saveAs(content, folderName);
            resolve('success');
          })
          .catch((e) => {
            message.warning(e?.message || '生成压缩包失败')
            reject(e);
          });
      })
      .catch((e) => {
        message.warning(e?.message || '批量获取文件流失败')
        reject(e);
      });
  });
}

import { request } from 'umi';

/**
 * @method 根据文件URL获取blob数据流的API
 * @param { String } fileUrl - 文件完整路径，如：http://xxx.png
 */
export function getBlobOfUrl(fileUrl: string) {
  return request(fileUrl, {
    method: 'GET',
    responseType: 'blob', // 设置后台返回的内容类型为blob
    params: {
      notAuthorization: true,
    },
  });
}