记录浏览器下载app包，下载文件方法

1、下载app包和文件的区别

下载app包因为包比较大，一般是后端直接给一个包地址，从地址url直接下载，或者如果包相对较小，也可以存在前端本地服务器，直接下载。

下载文件一般比较小，所以后端一般会提供接口，接口会传递字节流Blob，通过对字节流的转换成url进行下载。

2、下载app包和文件效果

3、下面是两种类型的实现方式

首先是app包的下载方法（通过把包存储在前端本地为例），实际生产环境可以把包地址换成线上地址

const handleDownload = () => {
    const downloadLink = document.createElement('a');
    const isMac = window.navigator.userAgent.includes('Mac');
    downloadLink.href = isMac ? '/mac.dmg' : '/windows.exe';
    downloadLink.download = isMac ? `mac.dmg` : `windows.exe`;
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
  };

然后是文档的下载，通过接口获取字节流，然后将字节流转换为url的方式进行下载（以导出excel表格为例）

//导出execl
  const downFile = (resBlob, fileName, fileType = '.xls', target = '_self') => {
    if (window.navigator && (window.navigator as any).msSaveOrOpenBlob) {
      // 兼容IE/Edge
      (window.navigator as any).msSaveOrOpenBlob(resBlob, fileName + fileType);
    } else {
      var url = window.URL.createObjectURL(resBlob);
      var a = document.createElement('a');
      a.href = url;
      a.target = target;
      a.style.display = 'none';
      a.setAttribute('download', fileName + fileType);
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);
    }
  };

  const handleExport = async () => {
    const res = await downLoadCreditProduct(upLoadTypeList[upLoadType].exportDataParams, {
      responseType: 'blob',
    });
    downFile(res.data, `模版数据${dayjs().format('YYYY-MM-DD')}`, '.xls');
  };

总结：

不管是下载app还是导出文件，实现的方法都是通过a标签的ref下载，不同的是下载文件会有中转层，window.URL.createObjectURL方法将字节流数据转成url进行下载。