FileReader文件下载

原创于 2021-06-23 20:43:17 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

summary 专栏收录该内容

25 篇文章

订阅专栏

此篇博客介绍了如何使用AJAX技术通过两次请求实现文件下载，首先获取文件令牌，然后根据不同文件类型转换为Blob对象并通过FileReader读取并触发下载。重点在于处理.docx和.xls文件的转换及下载操作。

function jumpDownloadInfo(ele){
    var fileId = $(ele).attr('fileId');
    var originalFileName = $(ele).attr('originalFileName');
    var type = $(ele).attr('type');
    $.ajax({
        url:url1,
        type:'get', 
        success:function(data){
            if(data.success){
                var tokenCont = data.message;
                $.ajax({
                    url:url2+fileId,
                    type:'get', 
                    beforeSend: function (request) {
                        request.setRequestHeader("Authorization", tokenCont);
                    },
                    xhrFields: { responseType: 'blob' },
                    success:function(data){
                        if(data){
                            if(type == '.docx' || type == '.doc'){
                                var blob =new Blob([data], {type: 'application/msword'});  
                            }
                            if(type == '.xls' || type == '.xlsx'){
                                var blob =new Blob([data], {type: 'application/vnd.ms-excel'});  
                            }
                            
                            // FileReader主要用于将文件内容读入内存
                            var reader = new FileReader();
                            reader.readAsDataURL(blob);
                            console.log(reader)
                            
                            // onload当读取操作成功完成时调用
                            reader.onload = function(e) {
                              
                                // 获取文件名fileName
                                var a = document.createElement('a');
                                // 获取文件名fileName
                                a.download = originalFileName;
                                a.href = e.target.result;
                             

                                document.body.appendChild(a);
                                a.click();
                                document.body.removeChild(a);
                               
                            }
                        }
                    }
                })
               

            }else{
                
            }
        }
    })
}