Ajax Post 下载文件

教程分享 > WEB技术 > 博文分享 (1748) 2024-04-19 09:52:42

Ajax Post 下载文件


通过原生js实现

function ajaxPostDownload(url,fileName,callback) {
    let xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.setRequestHeader("accessToken",session.get('accessToken'));
    xhr.responseType = "blob";   //返回类型blob
    xhr.onload = function () {   //定义请求完成的处理函数
        try {
            if (this.status === 200) {
                // console.log(this.response.type);
                // 获取响应头部
                // let fn=this.getResponseHeader("Content-Disposition");
                let blob = this.response;// 后端注意设置Content-Type,否则某些浏览器不支持下载
                let reader = new FileReader();
                reader.readAsDataURL(blob);   // 转换为base64,可以直接放入a标签href
                reader.onload = function (e) {
                    var a = document.createElement('a');   // 转换完成,创建一个a标签用于下载
                    a.download = fileName;
                    a.href = e.target.result;
                    $("body").append(a);    // 修复firefox中无法触发click
                    a.click();
                    $(a).remove();
                }
            }else if(this.status === 504){
                messageError('文件下载失败:超时');
            }else{
                messageError('文件下载失败,状态码:'+this.status);
            }
        }catch (e){
            messageError('下载错误:'+JSON.stringify(e))
        }finally {
            if (callback){
                callback();
            }
        }

    };
    xhr.send();
}


调用

let url="";
let fileName="abc.png";
ajaxPostDownload(url,fileName,function(){
  //下载完成后得操作,可以没有
})


基于原生js编写,适用绝大部分H5应用











 


相关文章
Ajax Post 下载文件通过原生js实现function ajaxPostDownload(url,fileName,callback) { let xhr = new XMLHt...
HTML5+ajax上传图片/文件以及FormData使用简单讲解,HTML5,ajax上传文件,ajax
针对ios手机,wx.downloadFile方法要设置filePath,指定文件下载后存储的路径 (本地路径), 才可预览文件// 下载Component({
问题描述JQuery_ajax formData 上传文件报错:Uncaught TypeError: Illegal invocationJquery 版本2.1.4$.ajax({ t...
IE9 jQuery ajax文件上传兼容问题解决。主要通过jQuery的jquery.form插件解决的IE9不支持formData的文件上传问题。
Linux后台下载工具(器)transmission 类似迅雷使用详解,transmission 是一款支持绝大多数Linux系统的下载工具,采用web进行管理。可以通过web添加bt下载文件下...
FastDFS分布式文件系统的下载和安装配置,FastDFS,FastDFS安装配置,分布式文件系统
1.jQuery ajax$.ajax({ type: 'POST', url: url, data: data, dataType: dataType, succ...
Java编程之Spring Boot 文件上传 REST风格API ajax方式
Spring mvc文件下载IE/Edge中文乱码解决,在spring mvc项目开发中,我们可能经常遇到文件的上传和下载操作。这里将讲解在IE/Edge浏览器中文件下载中文乱码的解决方法。
powerdesigner16.5X64破解文件,powerdesigner16 64位下载powerdesigner16 64bit下载,powerdesigner16 64位补丁PowerD...
问题描述Java 开发中使用spring  boot 下载excel文件提示“文件中部分内容有问题
DbVisualizer pro10.0 激活绿色版下载,DbVisualizer 10.0下载,DbVisualizer是一个完全基于JDBC的跨平台数据库管理工具,内置SQL语句编辑器(支持...
linux系统中ftp 上传和下载文件shell脚本编写