Js+Jquery无刷新 通过iFrame下载文件的方法

2018-12-21  本文已影响0人  Alola_

先推荐一篇很好的文章,讲解的很详细,对于各种方案的优缺和取舍也都写得很细致,逻辑很好。
前端文件下载流通识篇

另有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();//
    })
};
上一篇 下一篇

猜你喜欢

热点阅读