前端通过 Blob / a标签 / iframe的src属性实现文件下载

最新推荐文章于 2024-04-19 16:06:14 发布

huangq_qiao

最新推荐文章于 2024-04-19 16:06:14 发布

阅读量4.1k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qiao_qiao_happy/article/details/111935821

版权

本文介绍了前端实现文件下载的两种方法：一是利用Blob对象进行下载，适用于小文件，但大文件下载时速度较慢；二是通过iframe的src属性或a标签直接触发浏览器下载，提供更快的下载体验。

摘要由CSDN通过智能技术生成

1. 通过Blob下载

参考链接: 前端通过Blob实现文件下载
参考链接2 HTML5 File API 全介绍
在这里插入图片描述

在这里插入图片描述

1.1 Blob下载代码应用:

下载按钮

 <Button @click="downResult()" style="border: 1px solid">

调用的Blob下载方法

    // 下面的downResult是前端通过Blob实现文件下载,需要请求后台获取数据responseData, 但大文件的等待时间较长,现改为直接通过src下载
    downResult () {
   
      this.taskId = window.location.href.split('/').pop()
      this.taskLoading = true
      let id = parseInt(this.taskId)
      taskApi.downResult(id).then(responseData => {
   
        this.taskLoading = false
        this.$Message.success('运行结果获取成功，下载即将开始，请稍后……')
        let blob = new Blob([responseData], {
   type: 'application/zip'})
        let url = window.URL.createObjectURL(blob)
        console.log(url)
        this.download(url, '-result')
        window.URL.revokeObjectURL(url)
      })
    },
    download (url, text) {
   
      if (!url) {
   
        return
      }
      let link = document.createElement('a') // 创建