html中点击下载按钮下载图片

烈火熊熊

于 2024-07-17 16:38:37 发布

阅读量481

点赞数 3

文章标签： html 前端 html5 css vue.js javascript elementui

本文链接：https://blog.csdn.net/m0_58234730/article/details/140499214

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>下载图片</title>
</head>
<body>
  <button id="downloadButton">下载图片</button>
  <!-- <a href="https://sharedroi.oo523.com/theme/test/wallpaper/006_1704867998358_1705651901271.jpg" download="image.jpg">下载图片</a> -->
  <a href="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" download="image.jpg">下载图片会直接打开</a>
  <script>
    document.getElementById("downloadButton").addEventListener("click", function() {
      var imageUrl = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"; // 替换为你要下载的图片的URL
      var fileName = "图片名称.jpg"; // 下载的文件名，根据需要自行设置

      var xhr = new XMLHttpRequest();
      xhr.open("GET", imageUrl, true);
      xhr.responseType = "blob";

      xhr.onload = function() {
        if (xhr.status === 200) {
          var blob = new Blob([xhr.response], { type: "image/jpg" }); // 根据实际图片类型进行设置
          var link = document.createElement("a");
          link.href = window.URL.createObjectURL(blob);
          link.download = fileName;
          link.click();
        }
      };

      xhr.send();




    });
  </script>
</body>
</html>

点击下载按钮将图片下载到本机电脑