blob对象实现文件、图片下载

落花流雨

已于 2024-03-04 16:58:09 修改

阅读量1.4k

点赞数

分类专栏： # 常用js方法 # 原生JavaScript专题文章标签： javascript

于 2020-12-20 19:15:07 首次发布

本文链接：https://blog.csdn.net/weixin_44666644/article/details/111461105

版权

常用js方法同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

原生JavaScript专题

2 篇文章 0 订阅

订阅专栏

文件下载方法
后台返回二进制流，前端接收实现文件下载功能

const downloadApi = (response, fileName) => {
  // 创建a标签
  let a = document.createElement("a");
   a.download = fileName;
   // 创建二进制对象
   const blob = new Blob([response]);
   const downloadURL = (window.URL || window.webkitURL).createObjectURL(blob);
   a.href = downloadURL;
   // 模拟点击
   a.click();
   //释放资源并删除创建的a标签
   URL.revokeObjectURL(downloadURL);// a.href
   document.body.removeChild(a);
}

downloadApi("二进制数据", "text.xlsx")

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>blob对象实现文件下载</title>
</head>

<body>
  <button type="button">下载图片</button>
  <script type="text/javascript">
    function downLoad(url) {
      // 原生ajax请求
      const xhr = new XMLHttpRequest();
      xhr.open('GET', url);
      xhr.responseType = 'blob'; // 二进制数据
      xhr.send();
      xhr.onload = function () {
        const fileBlob = xhr.response;
        console.log('fileBlob', fileBlob);
        // 将blob转换为url地址
        const fileUrl = URL.createObjectURL(fileBlob)
        console.log('fileUrl', fileUrl);
        // 创建a标签
        const elementA = document.createElement('a');
        elementA.setAttribute('href', fileUrl);
        elementA.innerHTML = '下载';
        elementA.setAttribute('download', '')
        elementA.click()
      }
    }
    let imgUrl = 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1089874897,1268118658&fm=26&gp=0.jpg';

    document.querySelector('button').onclick = function () {
      downLoad(imgUrl);
    }
  </script>
</body>

</html>

落花流雨

关注

0
点赞
踩
1

收藏

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>blob对象实现文件下载</title></head><body> <button type
复制链接

扫一扫