HTTP协议中有一个content-type属性,此属性用于定义浏览器如何处理将要加载的数据,此属性的值可以查看 MIME 类型。
常见的MIME 类型如下,
text/html(HTML 文档);
text/plain(纯文本);
text/css(CSS 样式表);
image/gif(GIF 图像);
image/jpeg(JPG 图像);
application/x-javascript(JavaScript 脚本);
application/x-shockwave-flash(Flash);
application/x- www-form-urlencoded(使用 HTTP 的 POST 方法提交的表单);
multipart/form-data(同上,但主要用于表单提交时伴随文件上传的场合)。
application/octet-stream(二进制流)
浏览器对于application/octet-stream
的处理,通常都是下载到本地。
对于image/jpeg
的处理,通常是解析渲染显示。
需求是用户点击image/jpeg
的文件进行下载。
方法1:
响应头设置成Content-Type:application/octet-stream
方法2:
响应头新增属性Content-Disposition:attachment;filename=FileName.jpg
如果是跨域资源,需新增属性Access-Control-Allow-Origin:*
方法3:
使用a标签的download属性。
如果是跨域资源,download属性失效。
方法4:
使用浏览器的构建能力,对二进制数据进行特殊编码(浏览器能方便识别),再对编码结果进行对应处理。
使用(new FileReader()).readAsDataURL
把二进制数据进行base64编码,再转换成Data URL。
base64编码需要注意的是,在浏览器的地址栏中需要进行url编码。
Blob Test
使用window.URL.createObjectURL
把二进制对象或者文本转化成blob对象(浏览器支持的MIME类型),再转换成Blob URL。
Blob Test
可以方便的使用XMLHttpRequest获取blob数据,并对它进行相应格式的处理。
var downloadJS = require('download.js');
var x=new XMLHttpRequest();
x.open("GET", '下载文件的地址', true);
x.responseType = 'blob';
x.onload=function(e){downloadJS(x.response, '下载文件的名称', 'application/rar' ); }
x.send()
这里的download.js是指第三方blob处理库http://danml.com/download.html
我们若知道了一些文件的编码原理,便可以前端生成这些文件提供下载。
比如csv文件的编码规则是:
- 单元格之间是通过,隔开的
- 换行是通过\n实现的
我们便可以把json数据按照csv编码规则进行转化,然后再转化成blob对象,生成文件给用户下载。
csv导出库 https://github.com/Cody2333/csv-exportor
excel导出库 https://github.com/SheetJS/js-xlsx
参考:
http://w3help.org/zh-cn/causes/CH9001#standard_reference
https://segmentfault.com/a/1190000011563430
https://segmentfault.com/a/1190000011389463
https://github.com/eligrey/FileSaver.js/