美文网首页
iframe+表单post方式下载文件

iframe+表单post方式下载文件

作者: 我是你班主任 | 来源:发表于2017-08-31 12:05 被阅读0次

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

        var url = serverConfig.product.productListExport;
    
        var options = {
            url: url,
            data: {
                json: JSON.stringify(params)
            }
        };
        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();
    

    测试后发现,以上写法不支持Firefox和Safari,然后发现不用iframe就都好使了,直接post默认会阻塞页面,但是实际测试并没有发现什么问题,最终写法如下:

    var vm = this.vm;
                var url = serverConfig.product.productListExport;
                var params = utils.deepCopy({}, vm.productParam);
                
                var options = {
                    url: url,
                    data: {
                        json: JSON.stringify(params)
                    }
                };
                var config = $.extend(true, { method: 'post' }, options);
                var $form = $('<form target="down-file-iframe" method="' + config.method + '" />');
                $form.attr('action', config.url);
                $.each(config.data, function (key, value) {
                    var $input = $('<input type="hidden"/>').attr({
                        'name': key,
                        'value': value
                    });
                    $form.append($input)
                });
                $(document.body).append($form[0]);
                $form[0].submit();
    

    相关文章

      网友评论

          本文标题:iframe+表单post方式下载文件

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