欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前后端分离下载文件的几种方式

程序员文章站 2024-03-20 16:09:16
...

 

文章参考

http://blog.csdn.net/zhoumengshun/article/details/71405963

https://segmentfault.com/q/1010000011184241

 

在工作中遇到如下问题:

通过走网关下载一个文件,网关必须要带一个放在header请求头的token值,如果没有token就直接被拦截,请求不会到真正处理业务逻辑的service中

 

问题:

1、如果想要把token参数放到header中,只能使用ajax

2、如果使用ajax则只能获取返回来的只读数据,无法以文件方式写到硬盘中

 

解决办法:

把token做为参数放在URL问好后面中,例如:http://www.baidu.com?token=dsadfasfdsaf

 

下面四种方式是我总结前后端分离下载文件的方法

 

a. form表单下载文件

 

//表单方式直接下载文件
//url表示要下载的文件路径,如:htpp://127.0.0.1/test.rar
function downloadFile(url){
    var form=$("<form>");//定义form表单,通过表单发送请求
    form.attr("style","display:none");//设置为不显示
    form.attr("target","");
    form.attr("method","get");//设置请求类型  
    form.attr("action",url);//设置请求路径
    $("body").append(form);//添加表单到页面(body)中
    form.submit();//表单提交
}

 

 

b. iframe 下载文件

 

function downloadFile(url) {   
	try{ 
		var elemIF = document.createElement("iframe");   
		elemIF.src = url;   
		elemIF.style.display = "none";   
		document.body.appendChild(elemIF);   
	}catch(e){ 

	} 
}

 

c. 链接下载文件

 

<a href=”file.js”>file.js</a>

//该方法火狐有些版本是不支持的
window.location.href="htpp://www.baidu.com/test.rar"

//为了解决火狐有些版本不支持,可以改成这种方式
window.location="htpp://www.baidu.com/test.rar"; 

//该方法在火狐上没有效果的,在IE浏览器上是可以的
window.open("htpp://www.baidu.com/test.rar")

 

d. ajax 只能获取文本数据(如果是数据流已经转为了Blob,base64的格式)

 

function saveFile(url) {
  return new Promise(function(resolve, reject) {
    // Get file name from url.
    var filename = url.substring(url.lastIndexOf("/") + 1).split("?")[0];
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function() {
      resolve(xhr);
    };
    xhr.onerror = reject;
    xhr.open('GET', url);
    xhr.send();
  }).then(function(xhr) {
    var a = document.createElement('a');
    a.href = window.URL.createObjectURL(xhr.response); // xhr.response is a blob
    a.download = filename; // Set the file name.
    a.style.display = 'none';
    document.body.appendChild(a);
    a.click();
    return xhr;
  });
}

 

备注:ajax请求的responseType="blob",这里是发送请求,返回的文件的数据