先推荐一篇很好的文章,讲解的很详细,对于各种方案的优缺和取舍也都写得很细致,逻辑很好。
前端文件下载流通识篇
另有ES6+React无刷新通过iFrame下载文件
(暂时没写。。。准备写来着,如果有人需要的话可以在下面评论催更或者私信我要代码。)
思路
直接使用Form表单提交会刷新页面,绑定一个iframe将form放到iframe里面提交,并且在完成后删除iframe就可以实现无刷新下载文件了。
这是一个非常基础的版本,如果有需要的话,增加一些错误提示之类的会更好。
downloadFileHelper = (token, service, postData,url) => {
//1、html专门设置一个空的div,用于下载,我的div的id是tempPane
let $tempPane = $('tempPane');
//2、新建一个form
let $form = $('<form>');
//form表单提交会刷新页面,因此绑定一个iframe,target设置之后将刷新转嫁到iframe。
$form.attr({id: "downloadFile", method: "POST", action: url, target: "downloadFileTarget"}).hide();
$form.append(`<input type="hidden" name="x_token" value="${token}"/>`);
//3、填充你需要提交的参数
for (let key in postData) {
postData[key] && $form.append(`<input type="hidden" name="${key}" value="${postData[key]}"/>`);
}
//4、新建一个iframe
let $iframe = $('<iframe>');
//此处需要设置name值用于form绑定。
$iframe.attr({id: "downloadFileTarget", name: "downloadFileTarget"}).hide();
//5、将form填充到iframe里,再将iframe填充到tempPane里
$iframe.append($form);
$tempPane.append($iframe);
//6、提交form表单
$form.submit();
//7、成功后清除tempPane里面的所有内容
$iframe.load(() => {
$tempPane.remove();//
})
};