【下载】模拟a标签下载接口返的数据流

后端返回二进制流或文件给前端,前端用Blob模拟实现下载文件

  • 前端页面模拟创建一个a
  • 利用Blob对象创建指定文件
  • 触发a的点击事件实现点击下载效果。
// 导出文件
  const exportFile = debounce(() => {
    showLoading(true);
    DownloadApi({
      ...searchParams,
    })
    .then((r) => {
        const {fileName=''} = r.respData || {}
        // 模拟a标签下载
        const blob = new Blob([r.respData], {
          type: 'application/vnd.ms-excel'  // 下载的是excel格式的文件
        });
        const objectUrl = URL.createObjectURL(blob)
        const a: any  = document.createElement('a'); //  URL对象
        document.body.appendChild(a);
        a.setAttribute('download', fileName) // 指定下载的文件名
        a.setAttribute('href', objectUrl)
        a.click();
        URL.revokeObjectURL(a.href); // 释放URL 对象
        showLoading(false);
        message.success('导出成功');
      })
      .catch(() => showLoading(false));
  }, 500);

如果要下载apk格式的文件

  • 对应type:application/vnd.android.package-archive
 const packageUrl = cardInfo?.packageUrl || '';
    const blob = new Blob([packageUrl], {
      type: 'application/vnd.android.package-archive',
    });
    const objectUrl = URL.createObjectURL(blob);

如果要前端生成TXT 文件并下载

        const data = '要下载的文件内容'
        const objectUrl = `data:text/plain;charset=utf-8,${encodeURIComponent(data)}`;
        a.setAttribute('href', objectUrl);

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容