本文对比了下载文件头几种不同设置方式的兼容性,并提供了测试方法。
如果想让一个文件调用浏览器下载功能进行下载,而不是直接在浏览器中打开,则需要设置响应头的Content-Disposition字段。
下载响应头的设置在不同浏览器中的兼容性各不一样,下面将探索各个浏览器之间的不同,以及找出一种可以兼容各大主流浏览器的方案。
测试环境说明(可根据兼容性要求自行测试):
Chrome 57,系统版本MacOS 10.12.3
Safari 10.0.3,系统版本MacOS 10.12.3
Firefox 52,系统版本Windows 2003
Edge 14,系统版本Windows 10
IE 11,系统版本Windows Server 2008
IE10,系统版本Windows Server 2008
IE9,系统版本Windows Server 2008
服务端代码如下:
$fnType = $_GET['fntype'];
if ($fnType == 'ascii') {
$filename = 'English Filename.txt';
} else {
$filename = '中文文件名.txt';
}
$urlencode = isset($_GET['urlencode']);
if ($urlencode) {
$filename = rawurlencode($filename);
}
$outputType = isset($_GET['output']) ? $_GET['output'] : null;
if ($outputType == 'old') {
header("Content-Disposition: attachment; filename=$filename");
} else if ($outputType == 'new') {
header("Content-Disposition: attachment; filename*=UTF8''$filename");
} else {
header("Content-Disposition: attachment; filename=$filename; filename*=UTF8''$filename");
}
if (isset($_GET['withcontenttype'])) {
header('Content-Type: text/plain');
} else {
header('Content-Type: ');
}
查看响应头方法:
curl -I url
一、纯ASCII字符文件名兼容性
测试地址:https://demo.lyz810.com/downloadHeader/?fntype=ascii&output=old
响应头:
Content-Disposition: attachment; filename=English Filename.txt
结果:
Chrome:English Filename.txt
Safari:English Filename.txt
Firefox:English(由于文件名含有空格,空格后面的字符都被Firefox忽略了)
Edge:English Filename.txt
IE 11:English Filename.txt
IE10:English Filename.txt
IE9:English Filename.txt
二、纯ASCII字符文件名url编码
测试地址:https://demo.lyz810.com/downloadHeader/?fntype=ascii&output=old&urlencode=1
响应头:
Content-Disposition: attachment; filename=English%20Filename.txt
结果:
Chrome:English Filename.txt
Safari:English%20Filename.txt
Firefox:English%20Filename.txt
Edge:English Filename.txt
IE 11:English Filename.txt
IE 10:English Filename.txt
IE 9:English Filename.txt
三、中文文件名,utf-8不进行url编码
测试地址:https://demo.lyz810.com/downloadHeader/?output=old
响应头:
Content-Disposition: attachment; filename=中文文件名.txt
结果:
Chrome:中文文件名.txt
Safari:ä¸ææ件å.txt
Firefox:中文文件名.txt
Edge:涓枃鏂囦欢鍚_txt.txt
IE 11:涓枃鏂囦欢鍚_txt
IE 10:downloadHeader(url的pathname部分)
IE 9:涓枃鏂囦欢鍚_txt
四、中文文件名,utf-8进行url编码
测试地址:https://demo.lyz810.com/downloadHeader/?output=old&urlencode=1
响应头:
Content-Disposition: attachment; filename=%E4%B8%AD%E6%96%87%E6%96%87%E4%BB%B6%E5%90%8D.txt
结果:
Chrome:中文文件名.txt
Safari:%E4%B8%AD%E6%96%87%E6%96%87%E4%BB%B6%E5%90%8D.txt
Firefox:%E4%B8%AD%E6%96%87%E6%96%87%E4%BB%B6%E5%90%8D.txt
Edge:中文文件名.txt
IE 11:中文文件名.txt
IE 10:中文文件名.txt
IE 9:中文文件名.txt
五、中文文件名,使用filename*并进行url编码
测试地址:https://demo.lyz810.com/downloadHeader/?output=new&urlencode=1
响应头:
Content-Disposition: attachment; filename*=UTF8”%E4%B8%AD%E6%96%87%E6%96%87%E4%BB%B6%E5%90%8D.txt
结果:
Chrome:中文文件名.txt
Safari:downloadHeader.txt
Firefox:中文文件名.txt
Edge:downloadHeader
IE 11:downloadHeader
IE 10:downloadHeader
IE 9:downloadHeader
六、中文文件名,同时使用filname*和filename,并进行url编码
测试地址:https://demo.lyz810.com/downloadHeader/?urlencode=1
响应头:
Content-Disposition: attachment; filename=%E4%B8%AD%E6%96%87%E6%96%87%E4%BB%B6%E5%90%8D.txt; filename*=UTF8”%E4%B8%AD%E6%96%87%E6%96%87%E4%BB%B6%E5%90%8D.txt
结果:
Chrome:中文文件名.txt
Safari:%E4%B8%AD%E6%96%87%E6%96%87%E4%BB%B6%E5%90%8D.txt
Firefox:中文文件名.txt
Edge:downloadHeader
IE 11:downloadHeader
IE 10:downloadHeader
IE 9:downloadHeader
七、结论
1.IE系列(包括Edge)对于中文,只支持urlencode的方式,不能识别filename*
2.Firefox支持不编码的中文和filename*
3.Chrome支持各种上面测试的各种类型
4.Safari仅支持ISO格式的中文,此文中并未给出测试实例,请参考http://lgbolgger.iteye.com/blog/2108396