前端下载的EXCEL文件无法打开的解决办法

前端下载的EXCEL文件无法打开的解决办法

根据工作需要，要下载一个excel文件模板，但下载的文件报错，打不开，如下：

检查了下载的代码，均没问题，出现这个问题的主要原因原来是需要在接口中加一个responseType，类型要为blob，这个非常重要，必须要，因为我这儿是封装好的接口，所以我直接在这里加上这句就可以，代码如下：

下载方法封装：

 //普通下载
  /**
   * @description 接收数据流生成 blob，创建链接，下载文件
   * @param {Function} api 导出表格的接口 (必传)
   *  @param {Object} params 导出的参数 (默认{})
   * @param {String} filename 导出的文件名 (必传)
   * @param {Boolean} isNotify 是否有导出消息提示 (默认为 true)
   * @param {String} fileType 导出的文件格式 (默认为.xlsx)
   * */
  const downloadFile = async (
    api,
    filename,
    fileType: string = '.xlsx',
    params: any = {},
    isNotify: boolean = false,
  ) => {
    if (isNotify) {
      ElNotification({
        title: '温馨提示',
        message: '如果数据庞大会导致下载缓慢哦，请您耐心等待！',
        type: 'info',
        duration: 3000,
      });
    }
    const res = await api(params);
    const blob = new Blob([res]);
    saveAs(blob, filename, fileType);
  };

const saveAs = (blob, filename, fileType) => {
    const link = document.createElement('a');
    const body = document.querySelector('body');
    link.href = window.URL.createObjectURL(blob);
    link.download = fileType ? `${filename}${fileType}` : `${filename}`;
    link.style.display = 'none';
    body.appendChild(link);
    link.click();
    body.removeChild(link);
    window.URL.revokeObjectURL(link.href);
  };