前端文件下载通用函数

前置要求后端返回的是文件流的格式

如果下载下来的内容打不开请一定检查前端接口的请求是否配置了响应类型 responseType: 'blob' 如果上面检查无误，那就放心去找后端展示语言魅力全部。

/**
 * 文件下载
 *
 * @param res 文件数据
 * @param msg 文件名称(当header无数据时使用)
 * @param type  文件类型
 * @param isTime  是否显示时间
 */
export const downloadFile = (fileArrayBuffer, filename) => {
  const data = new Blob([fileArrayBuffer], {
    type: 'application/vnd.ms-excel,charset=utf-8',
  });
  if (typeof window.chrome !== 'undefined') {
    // Chrome
    const link = document.createElement('a');
    link.href = window.URL.createObjectURL(data);
    link.download = filename;
    link.click();
  } else if (typeof window.navigator.msSaveBlob !== 'undefined') {
    // IE
    const blob = new Blob([data], { type: 'application/force-download' });
    window.navigator.msSaveBlob(blob, filename);
  } else {
    // Firefox
    const file = new File([data], filename, {
      type: 'application/force-download',
    });
    window.open(URL.createObjectURL(file));
  }
};

使用示例

import { downloadFile } from '@/XXXXX';

  try {
    const res = await exportDataReq(data);
    downloadFile(res, `模板数据${dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`);
    loadingExport.value = false;
  } catch (e) {
    loadingExport.value = false;
  }