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

清疚 2021-11-22 04:32 1261阅读 0赞

## 原生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();
    }

转载于:https://www.cnblogs.com/roseAT/p/11074765.html

发表评论取消回复

表情：

评论列表（有 0 条评论，1261人围观）

还没有评论，来说两句吧...

相关阅读

相关 AFN3.0设置请求头Header

默认的请求头是这样的 { "Content-Length" = 1301; "Content-Type" = "text

待我称王封你为后i/ 2023年10月17日 14:36/ 0 赞/ 134 阅读

相关 laravel设置与获取header请求头

设置方式 <?php namespace App\Http\Controllers\Text; use Illuminate\Ht

Dear 丶/ 2023年10月06日 16:04/ 0 赞/ 72 阅读

相关 Swagger2实现配置Header请求头

效果 ![在这里插入图片描述][2f0c865dbb4245449d9eae9d9d24e914.png] 实现大家使用swagger肯定知道在代码中会写一个

r囧r小猫/ 2023年09月29日 21:16/ 0 赞/ 7 阅读

相关 Request Headers 和Response Headers——请求头和响应头

前沿作为一个前端开发工程师看不懂每条请求的请求头和响应头，实在是一件很难受的事情。最近花了一些时间整理了一篇文档，一起来看看前后端交互时每个资源的信息。谷歌浏览器

本是古典何须时尚/ 2022年12月23日 12:29/ 0 赞/ 1157 阅读

相关 python爬虫设置请求消息头(headers)

创建时间:2017.03.14 -------------------- 简述在使用`python`爬虫爬取数据的时候，经常会遇到一些网站的反爬虫措施，一般就是针对

╰+哭是因爲堅強的太久メ/ 2022年09月29日 05:28/ 0 赞/ 244 阅读

相关前端设置请求头POST方式下载实现

iframe、form表单提交的方法不能设置请求头； jq的ajax不能处理blob文件，这里用原生XMLHttpRequest，可以设置请求头参数，pos

我会带着你远行/ 2022年09月12日 14:52/ 0 赞/ 262 阅读

相关 Request Headers请求头和Response Headers响应头

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

落日映苍穹つ/ 2022年08月30日 11:36/ 0 赞/ 272 阅读

相关【JAVA】拦截请求参数并设置请求头

业务中遇到了一些场景，需要对请求做统一拦截，用请求参数计算新的变量设置到请求头中。以下分别用Filter和Interceptor两种方式实现，（建议使用Fi

今天药忘吃喽~/ 2022年03月25日 09:08/ 1 赞/ 1621 阅读

相关 RestTemplate设置通用header 并获取header请求参数

在开发项目过程中，使用的架构 springboot + vue，但java项目又拆分成一个基础授权（base）项目，一个获取授权（auth）项目，还有两个业务系统。此时需要通过

灰太狼/ 2021年11月24日 00:16/ 0 赞/ 1276 阅读

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

原生js实现文件下载并设置请求头header const token="自行定义";//如果有 / 向指定路径发送下载请求 @para

清疚/ 2021年11月22日 04:32/ 0 赞/ 1262 阅读