blob对象实现文件下载

最新推荐文章于 2024-07-31 15:45:12 发布

前端初见

最新推荐文章于 2024-07-31 15:45:12 发布

阅读量10w+

点赞数 1

分类专栏： html 前端知识文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/stc_ljc/article/details/129698940

版权

前端知识同时被 2 个专栏收录

25 篇文章 6 订阅

订阅专栏

html

8 篇文章 0 订阅

订阅专栏

文章目录

前言
总结

前言

有时候公司或者我们自己想要通过文件流的形式下载文件，或者我们想将某些数据以某种文件格式下载下来。blob是个不错的选择。基本上所有的文件都能生成。

a标签download属性（可以下载同域名下的文件）

向下面第一个a标签是一个网址，因为和本地服务不同源，是跨域的，是不会直接下载图片的，同域名下的可以使用这种方式

  <!-- 下载图片--a标签download下载 -->
  <!-- 跨域的 -->
  <a download href="https://img2.baidu.com/it/u=579752663,2659622847&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1056">下载图片</a>
  <!-- 不跨域的，同域名下的可以使用这种方式 -->
  <a download href="./img/lufei.png">下载当前页面本服务器图片</a>

用liveserver启动一个本地服务，然后可以使用download下载本地服务器同域名下的图片
在这里插入图片描述

下载不同源文件

Blob对象

Blob 对象表示一个二进制文件的数据内容，比如一个图片文件的内容就可以通过 Blob 对象读写。它通常用来读写文件，它的名字是 Binary Large Object （二进制大型对象）的缩写。它与 ArrayBuffer 的区别在于，它用于操作二进制文件，而 ArrayBuffer 用于操作内存。

Blob对象使用场景

分片上传
从互联网下载数据
Blob用作URL
Blob 转换为Base64
图片压缩
Blob与ArrayBuffer的区别

在js封装一个下载文件的函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>下载文件</title>
</head>
<body>
  <!-- 下载图片--a标签download下载 -->
  <!-- 跨域的 -->
  <a download href="https://img2.baidu.com/it/u=579752663,2659622847&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1056">下载图片</a>
  <!-- 不跨域的 -->
  <a download href="./img/lufei.png">下载当前页面本服务器图片</a>
  <script>
    /**
     *  download 函数下载互联网文件
    */
    function download(url){
      const xhr=new XMLHttpRequest()
      xhr.open('GET',url)
      // GET请求，url地址
      xhr.responseType='blob'
      // 响应类型设置为blob
      xhr.send()
      // 发送请求
      xhr.onload=function(){
        // 是否加载完毕
        const fileBlob=xhr.response;
        console.log(fileBlob)
        // xhr.response返回的数据
        const fileUrl=URL.createObjectURL(fileBlob)
        // 将fileBlob转换成url地址
        console.log(fileUrl)
        const elementA=document.createElement('a')
        // 创建一个a标签
        elementA.setAttribute('href',fileUrl)
        // 设置a标签属性 ，href属性名，fileUrl属性值
        elementA.innerText='下载'
        elementA.setAttribute('download','')
        // 设置a标签download属性
        document.body.appendChild(elementA)
        // 添加到body里面
      }
    }
    let imgUrl='https://img2.baidu.com/it/u=579752663,2659622847&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1056'
    download(imgUrl)
    // 调用一下
  </script>
</body>
</html>
  </script>

xhr.responseType

AJAX 请求时，如果指定responseType属性为blob，下载下来的就是一个 Blob 对象。

生成url

生成 URL
浏览器允许使用URL.createObjectURL()方法，针对 Blob 对象生成一个临时 URL，以便于某些 API 使用。这个 URL 以blob://开头，表明对应一个 Blob 对象，协议头后面是一个识别符，用来唯一对应内存里面的 Blob 对象。这一点与data://URL（URL 包含实际数据）和file://URL（本地文件系统里面的文件）都不一样。
在这里插入图片描述

在这里插入图片描述

后续的函数触发可以自己添加事件触发

分享一个我在工作项目中的使用

封装的downloadBlob 方法

 // 文件下载封装
    /**
     * fileId用户调下去文件接口
     * flieName 文件名 自定义
     */
    downloadHandle(fileId, flieName) {
      // this.loading = true
      this.$axios({
        url: `/attachment/download/${fileId}`,
        responseType: 'blob',
      })
        .then((res) => {
          // console.log(res.data)[{ ize: 11235, type: 'image/png' }]
          let url = window.URL.createObjectURL(res.data)
          let a = document.createElement('a')
          a.style.display = 'none'
          a.href = url
          a.setAttribute('download', flieName)
          document.body.appendChild(a)
          a.click() //执行下载
          window.URL.revokeObjectURL(a.href)
          document.body.removeChild(a)
        })
        .finally(() => (this.loading = false))
    },
}

组件中一个小组件

      <el-button
                      title="点击下载"
                      type="text"
                      style="
                        word-break: break-all;
                        white-space: normal;
                        line-height: 1;
                        text-align: left;
                      "
                      @click="clhqmzdown()"
                    >
                      {{ '点击下载处理后签名照' }}
           </el-button>

组件调用

    clhqmzdown() {
      console.log(this.clqmzid)
      this.downloadHandle(this.clqmzid, this.username + '处理后签名照')
    },

总结

如果这篇【文章】有帮助到你💖，希望可以给我点个赞👍，创作不易，如果有对前端端或者对python感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！
👨‍🔧 个人主页 : 前端初见。

前端初见

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
blob对象实现文件下载

有时候公司或者我们自己想要通过文件流的形式下载文件，或者我们想将某些数据以某种文件格式下载下来。blob是个不错的选择。基本上所有的文件都能生成。
复制链接

扫一扫

专栏目录