使用fetch下载图片为本地文件-CSDN博客

本文链接：https://blog.csdn.net/coco_chun/article/details/124710521

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title></title>
                                <script src="https://unpkg.zhimg.com/jquery@3.4.1/dist/jquery.min.js"></script>
        </head>
        <body>
                <img src="https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=gQE_7zwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAyWXJrd1pQREFjWUMxajZaWHh5Y1kAAgS2L3tiAwQQDgAA" alt="">

                <a id="a" href=""></a>
                <div οnclick="download('https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=gQE_7zwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAyWXJrd1pQREFjWUMxajZaWHh5Y1kAAgS2L3tiAwQQDgAA','aa.jpg')">下载</div>
        </body>
        <script>

                function download(url,name) {
                       // fetch抓取图片数据
                       fetch(url).then(response=> {

                           if( response.status == 200 )
                               // 返回的.blob()为promise，然后生成了blob对象，此方法获得的blob对象包含了数据类型，十分方便
                               return response.blob()
                           throw new Error(`status: ${response.status}.`)
                       }).then(blob=> {
                           // 获取到blob对象
                           downloadFile(name, blob)
                       }).catch(error=> {
                           console.log("failed. cause:", error)
                       })
                   }
                   function downloadFile(fileName, blob) {
                           console.log(blob)
                           console.log(fileName)
                          const anchor = document.getElementById("a")
                          // 创建指向blob对象地址
                          const src = URL.createObjectURL(blob)
                          anchor.download = fileName
                          anchor.href = src
                                  anchor.click()
                   }

        </script>
</html>

前端通过链接下载图片