vue中a标签跨域下载文件（非图片文件适用）解决办法

一、a标签download属性（同源写法）

<a :href="xxxx.xls" download="模板文件">模板下载</a>

这样的写法只存在同源情况下，非同源跨域情况下图片与pdf文件（只要浏览器支持）都会直接打开。

试过跨域请求写法，参考链接：https://www.cnblogs.com/makal...

//onclick 事件
<a @click="downloadFile(fileUrl,fileName)">下载文件</a>

downloadFile(url, fileName) {
   var x = new XMLHttpRequest();
   x.open("GET", url, true);
   x.responseType = 'blob';
   x.onload=function(e) {
    //会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
    var url = window.URL.createObjectURL(x.response)
    var a = document.createElement('a');
    a.href = url
    a.download = fileName;
    a.click()
  }
    x.send();
},

这样写法控制台还是会报跨域问题。

二、解决办法（直接删除a标签里的download属性）

//直接删除a标签里的download属性（非图片文件适用）。
//tempUrl为传过来的url,根据需求自行配置。

<a :href="tempUrl" target="_blank">模板下载</a>