1. 调用后端接口导出文件
示例下载接口url https://gold-cdn.xitu.io/extension/0.3.9/package.crx
1.1 window.open(url)
会打开一个新窗口，开始下载后会自动关闭新窗口。Safair 下载后没有关闭新窗口。
Chrome、IE、Safair支持，貌似火狐不支持
1.2 window.location=url
在当前窗口下载
Chrome、Safair支持
1.3 iframe
在HTML中，iframe 的属性用src，但在JS中，只有部份浏览器支持修改src(读是没问题)，真正通用的是要修改对应框架的href值。
1.4 <a href="url" download="filename">点击链接下载</a>
HTML5中给a标签增加了一个download属性，只要有这个属性，点击这个链接时浏览器就不在打开链接指向的文件，而是改为下载，目前只有chrome、firefox、opera、Edge支持。常用此方法点击下载图片。
IE既不支持a标签的download属性也不允许js调用a 标签的click方法。
2. 前端直接导出文件到本地
2.1 将数据转成DataURI用<a>标签下载
<a href="DataURI" download="filename">点击链接下载</a>
Data URI Scheme
Data URI Scheme是指可以在Web 页面中包含图片但无需任何额外的HTTP 请求的一类URI。 Data URI Scheme一般用于将经过base64编码的数据嵌入网页中，从而减少请求资源的链接数。IE8 之前的版本都不支持 data URI scheme。
DataURI的格式：
生成DataURI的方式
1. encodeURIComponent
使用这种方式，当数据过多时，URI长度容易超出浏览器限制。 encodeURIComponent常用来转码接口参数，为了避免服务器收到不可预知的请求，对任何用户输入的作为URI部分的内容都需要用encodeURIComponent进行转义。
2. URL.createObjectURL
URL.createObjectURL的参数是File对象或者Blob对象
IE10以下不支持URL.createObjectURL
2.2 windows.navigator.msSaveBlob IE10~Edge 专用
msSaveBlob 是IE10~Edge 私有方法。
2.3 execCommand
有的资料有提到IE9可以使用execCommand方法来保存数据到本地文件，但是我自己没有验证过，不知道是否可行。而且MDN文档中execCommand没有查到SaveAs命令。这块只是做个小记录。
js数据直接导出/下载数据到本地到方法总结
本文转载自：https://juejin.im/post/5cd00253518825418f6f2a8c?utm_source=gold_browser_extension
你检查一下是不是表格里面有隐藏的表格或者元素之类的，如果有的话，重新设置一下就好啦，下面我们看下JS怎么导出excel的
创建一个html文件。接着在html文件中写入一个table表格并且在表格如一些内容，给这个表格加个id为table，一边后续的测试。
再接着就是看看在网上自己书写的表格是什么样子的。然后就是用js写一个函数用来将表格导出为excel文件。（函数名为AllAreaExcel）
最后就是书写一个按钮，用来执行书写好的函数。在网页上查看自己书写的按钮是长什么样子的。
点击网页上的按钮后，执行成功，就会弹出一个对话框为“成功”，如下图所示
(function ($) {Date.prototype.Format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
}
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length))
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)))
return fmt
}
$.fn.ExportExcel = function (thread_id,tab_id, options) {
var defaults = {
height: '24px',
'line-height': '24px',
margin: '0 5px',
padding: '0 11px',
color: '#000',
background: '#02bafa',
border: '1px #26bbdb solid',
'border-radius': '3px',
/*color: #fff*/
display: 'inline-block',
'text-decoration': 'none',
'font-size': '12px',
outline: 'none',
cursor: 'pointer'
}
var options = $.extend(defaults, options)
return this.each(function () {
var currentObject = $(this)//获取当前对象
currentObject.css(defaults)
currentObject.onmouseover = function () {
$(this).css('cursor', 'hand')
}
currentObject.click(function () {
//From:jsfiddle.net/h42y4ke2/16/
var tab_text = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">'
tab_text = tab_text + '<head><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'
tab_text = tab_text + '<x:Name>Test Sheet</x:Name>'
tab_text = tab_text + '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>'
tab_text = tab_text + '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>'
tab_text = tab_text + "<table border='1px'>"
tab_text = tab_text + $('#' + thread_id).html()
tab_text = tab_text + $('#' + tab_id).html()
tab_text = tab_text + '</table></body></html>'
var data_type = 'data:application/vnd.ms-excel'
var timeStr = new Date().Format('yyyyMMddhhmmss')
$(this).attr('href', data_type + ', ' + encodeURIComponent(tab_text))
$(this).attr('download', '日常数据报表' + timeStr + '.xls')
})
})
}
})(jQuery)
<html>
<a href="#" id="export">导出</a>
<table>
<thead id="theadDate">
<tr>
<th>姓名</th>
<th>班级</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="tbodyDate">
<tr> <td>张三</td>
<td>高二</td>
<td>18</td>
</tr>
<tr>
<td>李四</td>
<td>高三</td>
<td>20</td>
</tr>
</tbody>
</table>
<script src="assets/javascripts/autotest/export-excel.js" ></script><!-- 引入js文件-->
<script type="text/javascript">
//导出 调用
$(function () {
$('#export').ExportExcel('theadDate','tbodyDate')//tbodyDate为table的id,export为a标签。
})
</script>
</html>
