前端 web网页 下载图片

<span class="download-btn">下载图片</span>
//跨域图片下载
$('.download-btn').click(function () {
        const url = 'https://t14.baidu.com/it/u=3871151578,586465891&fm=179&app=42&size=w621&n=0&f=PNG?s=56F72C72CCB47E904B7DA3C40300A026&sec=1669914000&t=498c191f9915ca2d9bbcb2139ce6a6d3'
        const xhr = new XMLHttpRequest()
        xhr.open('GET', url, true)
        xhr.responseType = 'blob'
        xhr.onload = function () {
          if (this.status == 200) {
            const blob = this.response
            const downloadHref = window.URL.createObjectURL(blob)
            let a = document.createElement('a')
            a.href = downloadHref
            a.download = 'picture.png'
            a.click()
            window.URL.revokeObjectURL(downloadHref)
          }
        }
        xhr.send()
      })
 <a class="download-btn" download>下载文件</a>
//获取完数据赋值的时候,把文件下载地址,赋给a标签的href属性就可以
$('.download-btn').attr('href','https://www.clzczh.top/medias/test.xlsx')
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容