vue非同源下载图片

关于同源下载，以及为什么非同源，想必网上很多文章说的很多了，这边就不详细说明了，总结一句话就是现在的域和网上图片的域不满足同源策略，如何解决？方法也多种多样，后端可以操作，不限制Access-Control-Allow-Origin:* ，但是咱们前端也要会如何处理，了解到原因之后，就可以下手，想到了a链接下载？可以试试吧，

<el-button @click="downloadUrlFile1">下载图片1</el-button>
 
const downloadUrlFile1 = () => {
  downloadUrl1(
    "https://www.pokemon.cn/play/resources/pokedex/" +
      "/img/pm/c46fa6803887839b3bcc3556e0426bac7150f142.png",
    "下载.png"
  );
};
 const downloadUrl1 = (url, name) => {
  const a = document.createElement('a') // 创建a标签
  a.setAttribute('download', name || '')// download属性
  a.setAttribute('href', url)// href链接
  a.click()// 自执行点击事件
 }

 附上图片，大家猜猜是什么？嘿嘿嘿？不对啊，我要下载啊，怎么回事啊，怎么是预览呢？这时候呢，定位一波问题，download是h5a标签的新属性。

1.必须设置 href 属性，download 才起作用；

2.download 属性是文件名，href 属性，指向的是要下载的文件；

3.href 的指向需要同源，跨域下载不下来，当然可以通过其他方案，比如把图片传到自己后台，再返回同源的路径。

很明显咱跨域了，我这边是vue3+vite写的，找到vite.config.js，(你们找到vue.config.js即可）

 从http://xxx ==> https:xxx

代理吧，直接配置一个新的反向代理即可

 然后再改一波代码，

<el-button @click="downloadUrlFile1">下载图片1</el-button>
const downloadUrlFile1 = () => {
  downloadUrl(
    "/download" +
      "/img/pm/c46fa6803887839b3bcc3556e0426bac7150f142.png",
    "下载.png"
  );
};
const downloadUrl = (url, name) => {
  const a = document.createElement('a') // 创建a标签
  a.setAttribute('download', name || '')// download属性
  a.setAttribute('href', url)// href链接
  a.click()// 自执行点击事件
 }

直接替换download ==> 你需要替换的url即可

oj8k

当然呢，a下载有些时候不太优雅，咱也是可以转化一波canvas，然后获取base64数据的

 

const download = (imgsrc, name) => {
  let image = new Image();
  // 解决跨域 Canvas 污染问题
  image.setAttribute("crossOrigin", "anonymous");
  image.onload = function () {
    let canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    let context = canvas.getContext("2d");
    context.drawImage(image, 0, 0, image.width, image.height);
    let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
    let a = document.createElement("a"); // 生成一个a元素
    let event = new MouseEvent("click"); // 创建一个单击事件
    a.download = name || "photo"; // 设置图片名称
    a.href = url; // 将生成的URL设置为a.href属性
    a.dispatchEvent(event); // 触发a的单击事件
  };
  image.src = imgsrc;
};

直接安排，也可以下载图片，亲测可以，咱以后呢，也不要求着后端给*了，当然这只适用图片，pdf，csv等其他文件流是需要用到blob的，道理一样，

const download = (data, name) =>{
  if (!data) {
    return
  }
  // 判断浏览器navigator.userAgent
  var isIE = navigator.userAgent.indexOf('compatible') > -1 && navigator.userAgent.indexOf('MSIE') > -1 // 判断是否IE<11浏览器
  var isEdge = navigator.userAgent.indexOf('Edge') > -1 && !isIE // 判断是否IE的Edge浏览器
  var isIE11 = navigator.userAgent.indexOf('Trident') > -1 && navigator.userAgent.indexOf('rv:11.0') > -1
  // IE
  if (isIE || isEdge || isIE11) {
    const fileName = name || 'excel.xls'
    navigator.msSaveBlob(data, fileName)
    return
  }
  // 非IE
  const url = window.URL.createObjectURL(new Blob([data]))
  const link = document.createElement('a')
  link.style.display = 'none'
  link.href = url
  if (name) {
    link.setAttribute('download', `${name}`)
  } else {
    link.setAttribute('download')
  }
  document.body.appendChild(link)
  link.click()
}

希望可以帮到你~~~，有什么问题可以问我哦，记录一下，一起进步