不打开新页面下载文件

2021-04-09  本文已影响0人  code_搬运工

1. 使用IFrame

 var _url = 'aa.com/download';
 var fromstr = '<iframe id="d_iframe" name="d_iframe" style="display:none;"></iframe>';
 $(fromstr).appendTo('body');
 $('#d_iframe').attr('src', _url);

image.png

2. IFrame 模拟POST请求

(1). 方法
function postDownLoadFile (options) {
    var config = $.extend(true, { method: 'post' }, options);
    var $iframe = $('<iframe id="down-file-iframe" />');
    var $form = $('<form target="down-file-iframe" method="' + config.method + '" />');
    $form.attr('action', config.url);
    for (var key in config.data) {
        $form.append('<input type="hidden" name="' + key + '" value="' + config.data[key] + '" />');
    }
    $iframe.append($form);
    $(document.body).append($iframe);
    $form[0].submit();
    $iframe.remove();
}

(2) 调用

  postDownLoadFile({
                         url: $('#exportUrl').val(),
                         data: {
                             Term: $("#Term").val(),
                             Course: $("#Course").val(),
                             Chapter: $("#Chapter").val(),
                             HWID: $("#HWID").val(),
                             PaperID: $("#PaperID").val(),
                             StudentName: $("#StuName").val(),
                             StudentCode: $("#StuCode").val(),
                             Status: $("#Status").val(),
                             BeginTime: $("#BeginTime").val(),
                             EndTime: $("#EndTime").val(),
                             ClassName: $("#ClassName").val(),
                             optionsStr: escape(dataTable.ajax.params().optionsStr),
                             extype: 'page'
                         },
                         method: 'post'
                     });





3. 使用a 标签

 var elink = document.createElement('a');
 elink.download = '文件名';
 elink.style.display = 'none';
 elink.href = downUrl;
 elink.target = "_blank";
 document.body.appendChild(elink);
 elink.click();
 document.body.removeChild(elink);


image.png

4.XMLHttpRequest下载

image.png

5.form表单提交下载

form表单是个比较常用的html表签,用户提交用户信息,比如常见的登录、注册界面大部分都是通过form表单进行数据提交的。form表单所有要提交的数据都必须放在form标签中,method属性定义提交的方法(有get和post两种提交方法),action属性定义请求的地址。form标签中支持input、menus、textarea、fieldset、legend 和 label 等元素,通过submit向服务器提交数据。这里我创建了form表单和input框,input用于输入请求的参数,form用于提交数据请求


image.png

参考: https://www.toutiao.com/a6781359892960641544/?timestamp=1587724821&app=news_article_lite&group_id=6781359892960641544&req_id=202004241840200100140411563803B546

上一篇 下一篇

猜你喜欢

热点阅读