首页 > 基础资料博客日记

JavaScript-实现图片的下载(本地图片，远程图片，多个下载)

2024-07-10 17:00:05基础资料围观505次

文章JavaScript-实现图片的下载(本地图片，远程图片，多个下载)分享给大家，欢迎收藏Java资料网，专注分享技术知识

一、主要步骤

二、本地下载

三、远程下载

四、多个下载

一、主要步骤

主要通过<a/>标签来实现，将要下载的文件链接设置为href属性，将文件名设置为download属性，然后模拟点击这个链接即可触发下载。

本文简单例举了几种下载方式，只是完成下载的任务，具体细节和精确控制还请查看官方文档。

二、本地下载

1.本地比较简单，可以直接使用 a 标签

最简单的方式是：

herf为图片路径，download为设置下载文件名字

<a href="图片的路径" download="img.jpg">下载</a>

如果不想让 a 标签显示出来，可以创建隐藏的a标签，通过其他点击事件去触发下载：

(这里 download() 函数 return 一个function是因为需要在 addEventListener 的回调函数里传递参数)

<!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>Document</title>
</head>
<body>
    <button>点击下载</button>
    <script>
      // 获取button标签
      const bt = document.querySelector('button')
      // 给button添加点击事件    注意这里换成自己的路径
      bt.addEventListener('click',download('/1695208099339.jpg','img.jpg'))

      function download(url,fileName){
        return function(){
          // 创建a标签
          var link = document.createElement('a');
          // 设置a标签为不可见
          link.style.display = 'none';
          // 将a标签添加到body
          document.body.appendChild(link);
          // 设置a标签的href
          link.href = url;
          // 设置a标签的download
          link.download = fileName;
          // 模拟点击事件进行下载
          link.click();
          // 下载完成后移除a标签
          document.body.removeChild(link);          
          }
      }

    </script>
</body>
</html>

三、远程下载

在开发中，我们往往获取的是服务器上的图片，得到的只有图片的url地址，此时如果继续采用上面的方法会发现无法下载，变成了预览图片。
这里我们需要使用 fetch 来请求获取图片，然后将其转为 Bold 对象，通过该对象生成 Blob URL，这个url才是可以下载时使用的：

<!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>Document</title>
</head>
<body>
    <button>点击下载</button>
    <script>
      const srcList = [
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
        ]
      // 获取button标签
      const bt = document.querySelector('button')
      // 给button添加点击事件 
      bt.addEventListener('click',download(srcList[0],'img.jpg'))
      function download(url,fileName){
        return function(){
            //图片的地址 
            fetch(url)
            // 获取 blob 对象
            .then(res=>res.blob())
            .then(blob=>{
              // 创建a标签
              var link = document.createElement('a');
              // 设置a标签为不可见
              link.style.display = 'none';
              // 将a标签添加到body
              document.body.appendChild(link);
              // 生成Blob URL并设置给a标签的href属性
              var url = window.URL.createObjectURL(blob);
              link.href = url;
              // 设置a标签的download
              link.download = fileName;
              // 模拟点击事件进行下载
              link.click();
              //下载完成后清理URL对象和a标签
              window.URL.revokeObjectURL(url);
              document.body.removeChild(link); 
            })
          }
      }

    </script>
</body>
</html>

四、多个下载

前端下载的实际操作是由浏览器来处理的。当用户点击下载链接或者通过JavaScript触发文件下载时，浏览器会负责发起文件下载请求，并将文件保存到用户的本地计算机中。浏览器会处理文件下载的所有细节，包括网络请求、接收文件数据、保存文件等操作。

所以一般情况下，我们要下载多个文件，只需要循环向浏览器提交下载任务就可以了。

<!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>Document</title>
</head>
<body>
    <button>点击下载多个图片</button>
    <script>
      const srcList = [
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
        ]
      // 获取button标签
      const bt = document.querySelector('button')
      // 给button添加点击事件 
      bt.addEventListener('click',downloadMany(srcList))

      //下载多个
      function downloadMany(srcList){
          return function() {
              srcList.forEach((url,index)=>{
               //循环调用download函数下载
              download(url,index+'png')
            })
          }
      }
      //下载函数
      function download(url,fileName){
            //图片的地址 
            fetch(url)
              // 获取 blob 对象
              .then(res=>res.blob())
              .then(blob=>{
                // 创建a标签
                var link = document.createElement('a');
                // 设置a标签为不可见
                link.style.display = 'none';
                // 将a标签添加到body
                document.body.appendChild(link);
                // 生成Blob URL并设置给a标签的href属性
                var url = window.URL.createObjectURL(blob);
                link.href = url;
                // 设置a标签的download
                link.download = fileName;
                // 模拟点击事件进行下载
                link.click();
                //下载完成后清理URL对象和a标签
                window.URL.revokeObjectURL(url);
                document.body.removeChild(link); 
              })
      }

    </script>
</body>
</html>

注意：URL.createObjectURL 生成的url如果过多会有效率问题，可以在合适的时机（download后）释放掉。

文章来源:https://blog.csdn.net/qq_54140719/article/details/134481693
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！

标签：

上一篇：快速入门，springboot知识点汇总
下一篇：JavaScript 中的面向对象编程---＞构造函数---＞原型对象与原型链，由浅入深详细讲解！

首页 > 基础资料博客日记

JavaScript-实现图片的下载(本地图片，远程图片，多个下载)

一、主要步骤

二、本地下载

三、远程下载

四、多个下载

相关文章

最新发布

点击排行

本站推荐

标签云

首页 > 基础资料 博客日记

JavaScript-实现图片的下载(本地图片，远程图片，多个下载)

一、主要步骤

二、本地下载

三、远程下载

四、多个下载

相关文章

最新发布

点击排行

本站推荐

标签云

首页 > 基础资料博客日记