之前用的是a标签的方式,同源是没有问题的,但一跨域就不行了,试了其它方法,不是报跨域错误,就是在当前页面打开文件,体验相当不好。

data = data.replace(/\\/g, '/');
var aLink = document.createElement('a');
aLink.download = data.split('/')[data.split('/').length - ];
aLink.href = data;
aLink.click();

最终解决方案:

    /**
* 获取页面文件名
* @param url 文件url
*/
function downloadUrlFile(url) {
url= url.replace(/\\/g, '/');
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
//xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');
xhr.onload = () => {
if (xhr.status === ) {
// 获取文件blob数据并保存
var fileName = getFileName(url);
saveAs(xhr.response, fileName);
}
}; xhr.send();
} /**
* URL方式保存文件到本地
* @param data 文件的blob数据
* @param name 文件名
*/
function saveAs(data, name) {
var urlObject = window.URL || window.webkitURL || window;
var export_blob = new Blob([data]);
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
save_link.href = urlObject.createObjectURL(export_blob);
save_link.download = name;
save_link.click();
} /**
* 根据文件url获取文件名
* @param url 文件url
*/
function getFileName(url)
{
var num = url.lastIndexOf('/')+
var fileName = url.substring(num)
//把参数和文件名分割开
fileName = decodeURI(fileName.split("?")[]);
return fileName;
}

js解决跨域下载文件的更多相关文章

  1. vue.js 解决跨域问题

    我们调试vue.js代码的时候一般都用chrome, 下载插件 进入chrome应用商店 搜索 重启chrome就可以解决跨域问题

  2. 搞懂:前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

    什么是跨域 跨域:一个域下的文档或脚本试图去请求另一个域下的资源 广义的跨域包含一下内容: 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源请求(内部的引用,脚本script,图片img,fr ...

  3. 后台访问 JS解决跨域问题

    今天看了看以前做的一个小项目(其实就是一个页面),分享一下当时解决跨域问题的: 背景:公司把项目部署在多台服务器上,防止一台服务器崩溃后,其他的可以继续访问,对应本公司来说,某台服务器出问题后,技术人 ...

  4. js解决跨域问题

    JavaScript中的常见解决跨域的方法 1. 通过jsonp跨域 1.)原生实现: 2. document.domain + iframe跨域 此方案仅限主域相同,子域不同的跨域应用场景. 1.) ...

  5. 手动创建script解决跨域问题(jsonp从入门到放弃)

    vue项目一般用axios代替jQuery发送ajax请求,但是不支持jsonp格式,需要安装jsonp的依赖包,这就很不爽了,能自己轻易实现的,为什么要引乱七八糟的插件.jsonp其实就是利用< ...

  6. js中ajax如何解决跨域请求

    js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操 ...

  7. [转] js前端解决跨域问题的8种方案(最新最全)

    1.同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.j ...

  8. js的跨域问题和解决办法

    我们在开发中,经常会遇到跨域请求数据问题,那么什么是跨域呢?跨域就是js在不用域之间的数据传输或者通信,比如你在使用ajax从另外一个域请求数据,或者你的页面引入了iframe,要从iframe中获取 ...

  9. owin解决跨域js请求

    最近在用owin打了一个建议的http的api服务,但遇到了js跨域访问的问题,后来在网上找到了答案,已帮助遇到此问题的人 1.首先nuget先按着owin依赖的包,然后至关重要的一步是引用Micro ...

随机推荐

  1. PLAY2.6-SCALA(三) 数据的返回与保存

    1.修改默认的Content-Type 自动设置内容类型为text/plain val textResult = Ok("Hello World!") 自动设置内容类型为appli ...

  2. this的作用

    1.在一般函数方法中使用 this 指代全局  function test(){ this.x = 1; alert(this.x);  }  test(); // 1 2.作为对象方法调用,this ...

  3. Ubuntu matplotlib显示中文乱码的解决方法

    https://blog.csdn.net/huuinn/article/details/78968966

  4. 巨蟒python全栈开发-第11阶段 ansible3_4

    1.ansible  roles 2.nginx+uwsgi扩展 3.celery异步任务 4.celery延时任务 5.周期任务 6.celery与django结合 7.网络基础 8.celery监 ...

  5. Android实现圆角边框

    http://www.cnblogs.com/flyme/archive/2012/06/20/2556259.html android shape的使用 http://www.cnblogs.com ...

  6. Java成员方法,构造方法

    //作者:qingfeng//2017/2/17//功能:理解类的成员方法和构造方法class CreatWays{ public static void main(String args[]){   ...

  7. 应用内购(In-App Purchase)常见问题解答

    http://www.cocoachina.com/ios/20150612/12110.html 本文档为您解答应用内购相关的常见问题. 配置(Configuration) 1.我必须上传一个二进制 ...

  8. HSV转换

    HSV中H为色调(Hue).S为饱和度(Saturation).V为亮度(Value)三个分量构成 RGB和HSV颜色空间中进行图像处理的案例,HSV颜色空间分离图像中每一个像素的值或V分量.这个分量 ...

  9. vue-router2.0的用法

    随着vue越来越火,而vue-router却是一个项目不可或缺的,所以在这里结合实例总结一下router的用法,也是给自己的一个总结. 1.首先第一步当然是安装vue-router依赖,当然也可直接s ...

  10. hdu 3272 Mission Impossible

    Mission Impossible Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...