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

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

作者: Alola_ | 来源:发表于2018-12-21 18:29 被阅读0次

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

另有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();//
    })
};

相关文章

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

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

  • 批量下载

    通过iframe进行多文件批量下载

  • a标签下载文件

    有两种方法,1:a标签 。2:iframe。不同的是:a标签只能下载单个文件,iframe可以多文件下载。 前提是...

  • 下载引用的文件

    下载方法1:直接用a标签; 下载方法2:用创建iframe的方法;(该js文件存放在静态资源里)

  • js文件导出(下载)

    1. 当下载的文件不是存在服务器上的静态文件 需要调用后台API生成 1) GET方法 通过创建隐藏的iframe...

  • 锚点跳转距离顶部指定距离

    缺点url后缀中会添加#xxx; 刷新会有问题html js+jquery 解决上一个方法的问题html js(j...

  • 记录紧急下载Bug修复,备份

    Vue下载文件,采用的创建iframe的方式。因为文件格式有pdf。浏览器在iframe里打开。因iframe是隐...

  • iframe+表单post方式下载文件

    post方式下载文件有很多种方法,其中blob对象方法不兼容ie9,所以我选择iframe+form post方法...

  • JS刷新Iframe,跨域

    需求 项目中会有刷新iframe的需求, 方法 一般情况下,我们直接用iframe的location.reload...

  • 网页局部打印功能

    思路: 将打印内容写入到iframe中,通过iframe的window对象print()方法实现iframe打印 ...

网友评论

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

      本文链接:https://www.haomeiwen.com/subject/mdevkqtx.html