原生js实现文件下载并设置请求头header

boyanx2个月前技术教程15

原生js实现文件下载并设置请求头header

const token="自行定义表单令牌";//如果有
/**
* 向指定路径发送下载请求
* @param{String} url 请求路径
*/
function downLoadByUrl(url){
    var xhr = new XMLHttpRequest();
    //GET请求,请求路径url,async(是否异步)
    xhr.open('GET', url, true);
    //设置请求头参数的方式,如果没有可忽略此行代码
    // xhr.setRequestHeader("token", token);
    //设置响应类型为 blob
    xhr.responseType = 'blob';
    //关键部分
    xhr.onload = function (e) {
    //如果请求执行成功
    if (this.status == 200) {
        var blob = this.response;
        var filename = "我是文件名.xxx";//如123.xls
        var a = document.createElement('a');
        blob.type = "application/octet-stream";
        //创键临时url对象
        var url = URL.createObjectURL(blob);
        a.href = url;
        a.download=filename;
        a.click();
        //释放之前创建的URL对象
        window.URL.revokeObjectURL(url);
        }
    };
    //发送请求
    xhr.send();
}
标签: js下载文件

相关文章

Node.js 中实现HTTP文件下载_nodejs download

HTTP实现文件下载时,只要在服务器设置好相关响应头,并使用二进制传输文件数据即可,而客户端(浏览器)会根据响应头接收文件数据。而在Node.js中,设置好响应头后,读取文件流,再使用“.pipe()...

js 通过流的方式进行下载_js下载文件流保存到本地

背景项目上需要用到多语言,项目设计语言选择是通过header传递的,如果直接用平时location.href下载并无法实现这个效果,然后在网上查阅了一些资料,可以通过流处理来实现下载,代码如下down...

微信WeUI设计规范文件下载及使用方法

来人人都是产品经理【起点学院】,BAT实战派产品总监手把手系统带你学产品、学运营。WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知...

浏览器大文件(百M以上)的上传下载实现技术

NGINX支持超大文件HTTP断点续传,VUE实现文件的分片上传,前端大文件上传处理方案,如何解决控件附件上传时超大附件无法上传的问题,完美解决B/S无法上传大文件解决方法,网页完美解决B/S无法上传...

批量下载文件WEB_批量下载文件怎么导入到另外一个文件

批量下载文件WEB,批量下载文件c#,asp.net批量下载文件,jsp批量下载文件,java批量下载文件,php批量下载文件,.net core批量下载文件,webuploader批量下载文件,ja...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。