js 进行txt 文件URL下载
通常我们使用js进行URL文件下载一般为两种
1.使用window.open(url) 打开url完成 浏览器自动下载
2.使用<a>标签进行文件访问下载
这两种的区别是一个需要开出一个空白页面,a标签不需要进行页面转换
但对于txt文件,使用这两种都会直接将txt文件进行浏览器展示,当我们需要进行文件下载的时候就很难满足了,对于这种,我们搜索到的答案绝大部分都是
给a
标签添加 download
属性
如下:
function getBlob(url, filename) {
layer.load()
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = function () {
layer.closeAll('loading')
if (xhr.status === 200) {
var blob = xhr.response
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, filename);
} else {
var link = document.createElement('a');
var body = document.querySelector('body');
link.href = window.URL.createObjectURL(blob);
link.download = filename;
// fix Firefox
link.style.display = 'none';
body.appendChild(link);
link.click();
body.removeChild(link);
window.URL.revokeObjectURL(link.href);
}
} else if (xhr.status === 404) {
layer.msg('文件不存在')
} else {
layer.msg('接口请求失败')
}
};
然而这种方式只适合资源和当前服务符合同源策略
,当我们需要访问的文件和当前服务跨域的时候,就无法实现。因为在非同源策略下的download
属性是不会生效的。
对此,找了无数的页面后发现其实只需要很简单的一步,就是给我们的URL拼接上
'?response-content-type=application/octet-stream'
对的 ,就是这么简单。
获取url文件:
window.open(file_url+'?response-content-type=application/octet-stream');
大家可以尝试一下,是否解决了你的问题呢,我也是在访问oss的txt文件,不是跨域就是直接打开浏览器展示,花了几个小时才找到这个解决办法。