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编码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blob Test</title>
<script>
function handleFile(e) {
var file = e.files[0];
var fileReader = new FileReader();
var img = document.getElementsByTagName("img")[0];
fileReader.onload = function(e) {
img.src = e.target.result;
}
fileReader.readAsDataURL(file);
}
</script>
</head>
<body>
<input type="file" accept="image/*" onchange="handleFile(this)" />
<br/>
<img style="width:200px;height:200px">
</body>
</html>
使用window.URL.createObjectURL把二进制对象或者文本转化成blob对象（浏览器支持的MIME类型），再转换成Blob URL。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blob Test</title>
<script>
function handleFile(e) {
var file = e.files[0];
var blob = URL.createObjectURL(file);
var img = document.getElementsByTagName("img")[0];
img.src = blob;
img.onload = function(e) {
URL.revokeObjectURL(this.src); // 释放createObjectURL创建的对象##
}
}
</script>
</head>
<body>
<input type="file" accept="image/*" onchange="handleFile(this)" />
<br/>
<img style="width:200px;height:200px">
</body>
</html>
可以方便的使用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/
