前端通过请求并通过后端返回数据文件流来下载文件

最新推荐文章于 2024-10-21 16:02:15 发布

原创最新推荐文章于 2024-10-21 16:02:15 发布 · 3k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

文件下载

当前文章被收录于：

文件下载

1 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一种前端通过接收后端返回的数据流，并将其处理为文件下载的方法。代码示例展示了如何根据不同浏览器（如Chrome、IE和Firefox）特性，使用Blob、File及URL.createObjectURL等API实现文件下载。

前端通过传递参数，后端返回文件流，前端进行处理并进行文件下载，直接上代码。

downLoadFile(data, filename) {
      if (typeof window.chrome !== 'undefined') {
        // Chrome version
        var link = document.createElement('a')
        link.href = window.URL.createObjectURL(data)
        link.download = filename
        link.click()
      } else if (typeof window.navigator.msSaveBlob !== 'undefined') {
        // IE version
        var blob = new Blob([data], { type: 'application/force-download' })
        window.navigator.msSaveBlob(blob, filename)
      } else {
        // Firefox version
        var file = new File([data], filename, { type: 'application/force-download' })
        window.open(URL.createObjectURL(file))
      }
    }

downLoadFile函数第一个参数是后端返回的data，第二个参数名称是文件名称。
在这里插入图片描述
发送请求后获取到数据后就调用该函数