Ajax Post 下载文件

位置:首页>文章>详情   分类: 教程分享 > WEB基础   阅读(864)   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应用











 

地址:https://www.leftso.com/article/1113.html

相关阅读

Ajax Post 下载文件通过原生js实现function ajaxPostDownload(url,fileName,callback) { let xhr = new XMLHt...
问题描述JQuery_ajax formData 上传文件报错:Uncaught TypeError: Illegal invocationJquery 版本2.1.4$.ajax({ t...
清空input 类型为file的文件选择常见的方法分两类一. javascript 方式清空file选择首先获取dom元素filevar file=document.getElementById...
summernote 粘贴图片上传到服务器以下为关键代码//初始化富文本 $('#description').summernote('destroy'); ...
javascript(js)onclick 传递多个字符变量参数<a title="点击下载附件" onclick="downloadFile(\''+row.url+'\',\''+ro...
Bootstrap Table 后端分页详解防坑$('#tableId').bootstrapTable({ method:'post',//请求方法 url:'',//后台地址 p...
情况说明webstorm 源文件中文显示乱码,同样版本的代码文件再git服务器显示正确
通常使用普通的资源可以通过Cache-Control配置通知浏览器进行缓存,但是有些小站没有cdn资源,用了外站的cdn资源,速度一般又想提升用户体验,ServiceWorker缓存就有用武之地了。
ckeditor5 图片上传地址配置,ckeditor5和4的图片上传配置有点不一样。首先是确定你选的上传支持插件是什么,我这里是下面这个插件ckfinder upload adapter以次控...
CKEditor 5 不重新构建移除某个plugin控件组件参考代码:ClassicEditor .create( document.querySelector...