前端：同源与不同源图片的下载解决办法

hmk1900

已于 2022-03-05 18:49:19 修改

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 vue 文章标签： javascript html 前端

于 2022-03-05 18:43:15 首次发布

本文链接：https://blog.youkuaiyun.com/jjxp2011/article/details/123299086

前端同时被 2 个专栏收录

15 篇文章

订阅专栏

vue

6 篇文章

订阅专栏

该代码段展示了如何处理两种类型的文件下载：Blob URL 和普通URL。对于Blob URL，它创建一个`<a>`元素并触发点击事件来下载。对于普通URL，使用XMLHttpRequest获取文件，并在响应中创建一个Blob对象，然后创建URL并触发下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

handleDownload(file) {
      if (/^(blob:)/.test(file.url)){
        let a = document.createElement('a');
        let event = new MouseEvent('click');
        a.download = file.name;
        a.href = file.url;
        a.dispatchEvent(event);
      }else{
        let x=new XMLHttpRequest();
        let url = file.url
        let name = file.name
        console.log(url)
        //禁止浏览器缓存；否则会报跨域的错误
        x.open("GET", url+'?t='+new Date().getTime(), true);
        x.responseType = 'blob';
        x.onload=function(e){
          let url = window.URL.createObjectURL(x.response)
          let a = document.createElement('a');
          a.href = url
          a.download = name
          a.click()
        }
        x.send();
      }
    }