Javascript 使用自定义头下载AJAX文件

我想向URL发送一个请求，该URL为我提供一个文件下载对话框。同时，服务器需要请求头中的某些参数。我想在请求中插入一个自定义头，并在响应中获取一个文件。我们有什么办法可以做到这一点吗？

也许我不明白你的意思

我的想法是这样的：

//server xxx.php
//omit some code
echo '<a href="file_path" id="download">file_name</a>';

//browser
ajax({
    url: 'http://xxxx/xxx.php',
    success: function(html){
        //append to dom and TODO other manipulations
        $(dom).append(html);
        $('#download').trigger('click');
        $(dom).remove(html);
    }
})

//server xxx.php
//省略一些代码
回声'；
//浏览者
阿贾克斯({
网址：'http://xxxx/xxx.php',
成功：函数（html）{
//附加到dom和TODO其他操作
$（dom）.append（html）；
$（'下载'）.trigger（'点击'）；
$（dom）.remove（html）；
}
})

好的，我签入了一个旧的应用程序，下面是一个示例。你需要适应，但想法就在这里。 第一部分是放置在

WebMethod

上的请求侦听器属性的一部分。整个拦截器相当复杂，因为它管理几个案例

int byteSize = 262144;
byte[] data = new byte[byteSize];

if (!String.IsNullOrEmpty(myfileName))
{
    _context.Response.AddHeader("Content-disposition", "attachment; filename=\"" + myfileName+ "\"");
}

_context.Response.ContentType = DefaultContentType;
_context.Response.Cache.SetCacheability(HttpCacheability.Private);
_context.Response.Cache.SetExpires(DateTime.UtcNow.AddHours(1));
_context.Response.Buffer = false;
_context.Response.BufferOutput = false;
_context.Response.AddHeader("Content-length", myStreamSize.ToString());

try
{
    int counter = 0;
    int bytesRead = mystream.Read(data, 0, byteSize);
    while ((long)counter < myStreamSize|| bytesRead > 0)
    {
        counter += bytesRead;
        if (bytesRead < byteSize)
        {
            byte[] outBuf = new byte[bytesRead];
            Array.Copy(data, outBuf, bytesRead);
            _context.Response.BinaryWrite(outBuf);
        }
        else
        {
            _context.Response.BinaryWrite(data);
        }
        bytesRead = mystream.Read(data, 0, byteSize);
    }
}
finally
{
    mystream.Close();
    mystream.Dispose();
}
_context.Response.End();

单击按钮将调用此函数，并为其提供WebMethod的URL，最终将传递额外的参数。 JS端的想法是创建一个隐藏的iFrame，它将获取URL，然后提示用户下载

---

我希望它能有所帮助

尝试使用

a

元素，将

data-*

设置为请求的标题，

$.ajax（）

将

标题

选项设置为

a

元素

数据标题

对象

在

$.ajax（）

success

设置

a

元素

href

以

Blob

响应

在
objectURL
中，
下载
属性到
文件。名称
或临时文件名，调用
。单击
a
元素上的（）


$（文档）.ready（函数（）{
$（“输入[type=button]”。单击（函数（）{
//设置“数据头”对象
var el=$（“[数据头]”）；
el.data（“headers”）[“x-custom-headers”]=$（“输入[type=text]”）0]。值
||el.数据（“标题”）[“x-自定义标题”]；
$.ajax({
url:url.createObjectURL（新Blob（[$（“textarea”）.val（））{
类型：“文本/普通”
})),
键入：“获取”，
//将`headers`设置为`a`element`data headers`对象
标题：$（“[数据标题]”）。数据（“标题”），
发送前：函数（jqxhr）{
log（this.headers）；
警报（“自定义标题”+JSON.stringify（this.headers））；
},
成功：函数（数据、文本状态、jqxhr）{
var file=new Blob（[data]{
“类型”：jqxhr.getResponseHeader（“内容类型”）
});
console.log（数据、文件）；
$（“textarea，输入[type=text]”。val（“”）；
$（“a”）
艾特先生({
“href”：URL.createObjectURL（文件），
“下载”：file.name | |“file-”+$.now（）
}).on（“单击”，函数（）{
$（this.remove（））
})
.get（0）。单击（）；
},
错误：函数（jqxhr、textStatus、errorshown）{
console.log（textStatus，errorshown）
}
});
})
})





据我所知，您希望从web请求一个文件，该文件需要身份验证头，但不能通过简单的链接下载

然后需要做的是使用身份验证头进行ajax调用，以将数据作为blob下载。然后从客户端保存数据


jQuery的ajax/get方法不支持responseType=blob

所以这个例子使用的是最新的Blink和Firefox。它还使用来保存客户端生成的blob，而不是处理跨浏览器问题的方式

fetch("/", {headers: {"X-mashape-key": "XXXXXX-4-YYYYYY"}})
    .then( response => {
        // we can get the filename if the
        // response headers contains Content-Disposition
        var cd = response.headers.get("Content-Disposition");
        var name = cd && cd.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/)[1];

        response.blob().then( 
            blob => window.saveAs(blob, name || "index.html")
        )
    })

它还使用es6中提供的一些新的suger语法，这些语法可以通过babel或traceur传输到es5

如果您不包括，并且需要支持较旧的浏览器，那么您需要使用XHR以旧的方式进行

var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.open("get", "/");
xhr.setRequestHeader("X-mashape-key", "XXXXXX-4-YYYYYY");
xhr.send();
xhr.onload = function(){
    var cd = xhr.getResponseHeader("Content-Disposition")
    var name = cd && cd.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/)[1];

    window.saveAs(xhr.response, name || "index.html")
}

您正在向请求标头添加什么类型的信息？关于响应，您只需使用类似以下内容的
response.Clear（）返回所需内容；Response.ContentType=“应用程序/文本”；Response.ContentEncoding=_ex.Encoding；AddHeader（“内容处置”，String.Format（“附件；文件名={0}”，_ex.filename））；Response.BinaryWrite（_ex.Output）；Response.End（）
不是一个完全重复的问题，而是专门针对GET请求的，但是那里的答案可能有用。我认为最大的问题是请求头。如何在ajax调用中定制它们。我认为我们可能不会设置请求头，并确保响应头包含内容处置：附件。但是关于ajax文件下载问题，我不知道为什么要用这种方式。我们可以直接下载文件，而不刷新页面。另一方面，XMLHttpRequest无法获取二进制文件data@Rex黄：你错了。xhr可以获取二进制数据。。。只需设置
xhr.responseType='arraybuffer'
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.open("get", "/");
xhr.setRequestHeader("X-mashape-key", "XXXXXX-4-YYYYYY");
xhr.send();
xhr.onload = function(){
    var cd = xhr.getResponseHeader("Content-Disposition")
    var name = cd && cd.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/)[1];

    window.saveAs(xhr.response, name || "index.html")
}