下载流文件

2019-01-14  本文已影响0人  _喵了个喵_

由于jQuery的ajax函数、及ajaxSubmit等函数的返回类型(dataType)只有xml、text、json、html等类型,没有“流”类型,故我们要实现ajax下载时,不能够使用相应的ajax函数进行文件下载。

请看实例:

1. form 通过js生成一个form,用这个form提交参数,并返回“流”类型的数据。在实现过程中,页面也没有进行刷新  缺点:无法传递header

 var form = $('<form>');

                    form.attr('style','display:none'); 

                    form.attr('method','post'); 

                    form.attr('target', '_self'); 

                    form.attr('action',url);

                    for (var obj in data) {

                        if (data.hasOwnProperty(obj)) {

                            var input =  $('<input>');

                            input.attr('tpye','hidden');

                            input.attr('name',obj);

                            input.attr('value', data[obj]);

                            form.append(input)

                        }

                    }

                    $('body').append(form);

                    form.submit(); 

                    form.remove();

2.axios   axios ie9+       window.navigator.msSaveBlob ie10+  此方法只兼容ie10+

var config = {

            headers: {

                'token': token,

                'Content-Type': 'multipart/form-data',

            },

            responseType: 'blob',

        }

axios.post(url, data,config).then( res => {

    if ('download' in document.createElement('a')) { // 非IE下载

                    var url = window.URL.createObjectURL(res.data)

                    var link = document.createElement('a')

                    link.style.display = 'none'

                    link.href = url;

                    link.download = fileName;

                    document.body.appendChild(link)

                    link.click();

                    window.URL.revokeObjectURL(link.href) // 释放URL 对象

                    document.body.removeChild(link)

                  } else { // IE10+下载

                    window.navigator.msSaveBlob(res.data, fileName)

                  }

                    }).catch( res => {

                        console.log(res)

                    })

上一篇下一篇

猜你喜欢

热点阅读