Question

这主要是象牙塔问题，因为我可以轻松地创建一个新的URL端点。但基本上，当用户将Accept标头配置为包含text / csv时，我希望能够提供CSV。这在服务器端是微不足道的，但在客户端我不知道如何设置Accept标头，除非我使用的是XHR或其他“非浏览器”客户端。 HTML中是否有一种方法可以在链接或JS中设置Accept标头，以便在使用window.location时设置Accept标头？

Answer 1

我想我可能会把这个放在这里，为下一千个人看这篇文章。你不能这样做。

Answer 2

<强>更新

我将在下面留下原始答案给后人，但我现在看到我没有真正回答这个问题。没有办法“本地”执行此操作，我能想到的最好方法是使用数据uri（http://en.wikipedia.org/wiki/Data_URI_scheme）并让AJAX为您完成工作：

// aware that you didn't mention jQuery, but you can do this with or without
var download = function(){
    var mime = this.getAttribute('data-mime-type');
    $.ajax({
        accepts: mime,
        success: function(data){
            var uri = 'data:'+mime+';charset=UTF-8,' + encodeURIComponent(data);
            window.location = uri;
        }
    })
    return false;
}

使用下面示例中使用的相同构思：

<a href="/some-csv-endpoint" data-mime-type="text/csv">Download CSV</a>

document.querySelectorAll('a[data-mime-type]').onclick = download;

原始答案

没有内置方法强制链接上的“Accept”标头（通过HTML或Javascript）。我认为你可以使用极少量的服务器来轻松实现这一目标。客户端代码虽然。在任何语言都应该很容易，我的例子是PHP：

function get_accepted_headers() {
    $headers = apache_request_headers();
    if(array_key_exists('Accept', $headers)) {
        $accepted = explode(',', $headers['Accept']);
        return $accepted;
    }
    return array();
}

将数据接受属性添加到下载链接：

<a href="/some-csv-file.csv" data-accept="text/csv">Download CSV</a>

然后附加一个单击事件处理程序以确保用户接受指定的内容类型：

// will end up with something like: ["text/html", "application/xhtml+xml", "application/xml;q=0.9", "image/webp", "*/*;q=0.8"]
var user_headers = <?=stripslashes(json_encode(get_accepted_headers()))?>;
var click_header_check = function() {
    var accept = this.getAttribute('data-accept');
    if(user_headers.indexOf(accept) == -1) {
        console.log('User does not explicitly accept content-type: %s', accept);
        return false;
    }
    window.location = this.href;
    return;
}

// attach the event listener
document.querySelector('a[data-accept]').onclick = click_header_check;

不确定这是否是您所寻找的，但希望它有所帮助。

Answer 3

对于那些仍然感兴趣的人，有一种方法可以在纯JavaScript中执行此操作。

以下代码使用JQuery（https://jquery.com/）和FileSaver.js（http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js），但您可以自己编写相应的部分：

//in case of non binary data use:
var type = 'text/xml';
var url = 'http://your_url_here/'
$.ajax({accepts:{text:type},
        url:url,
        processData:false, 
        dataType:'text', 
        success:function(data){             
                saveAs(new Blob([data], {type: type}),'filename.txt');                                                                  
            }, 
        error: function(){
               // Handle errors here
            }
    });

如何为网页上的链接设置Accept Header？

3 个答案: