之前用的是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. jQuery 图片高亮显示

    主要的jQuery代码: $(function() { $("ul li").hover(function() { // over //鼠标移入当前列透明度为1 其他列为0.5 $ ...

  2. 线段树动态开点+树链剖分BZOJ4999

    以每个一个颜色开一颗线段树,内部以dfs序作为线段树节点,权值代表出现次数,维护线段树区间和 #include<iostream> #include<stdio.h> #inc ...

  3. SpringBoot @Transactional的rollbackFor属性

    1.简单回顾Java Exception 该图摘自:https://blog.csdn.net/zhangerqing/article/details/8248186 一方面,我们可以将异常分为运行时 ...

  4. mysql 中合并查询结果union用法 or、in与union all 的查询效率

    mysql 中合并查询结果union用法 or.in与union all 的查询效率 (2016-05-09 11:18:23) 转载▼ 标签: mysql union or in 分类: mysql ...

  5. Python 常量

  6. Streamy障碍一:大批量条目

  7. Python深入:setuptools简介

    Setuptools是Python Distutils的加强版,使开发者构建和发布Python包更加容易,特别是当包依赖于其他包时.用setuptools构建和发布的包与用Distutils发布的包是 ...

  8. @topcoder - SRM611D1L3@ ElephantDrinking

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定有一个 n*n 的平原,其中一些格子有些泉水.泉水每单位时间 ...

  9. HZOJ string

    正解炸了…… 考试的时候想到了正解,非常高兴的打出来了线段树,又调了好长时间,对拍了一下发现除了非常大的点跑的有点慢外其他还行.因为复杂度算着有点高…… 最后正解死于常数太大……旁边的lyl用同样的算 ...

  10. python selenium 测试 LOG

    1.首先在根目录中新建一个Logs文件夹,写入文件 2.在framework文件夹中写入logger.py 3.在testsuits文件夹中写入test_log.py logger.py # _*_ ...