一、通过后端处理导出
1.) 后端响应头设置
前端若想下载一个根据查询参数生成的excel报表文件,需要后端设置请求内容的类型,具体设置如下:
response.reset();
response.setContentType("application/vnd.ms-excel;charset=utf-8"); // 表明是excel类型
//response.setContentType("application/octet-stream"); // 或设成通用二进制流类型
response.setHeader("Content-Disposition", "attachment;filename=test.xls")); // 将请求的内容存为一个名为test的文件
2.) 前端相应的代码
正常情况下,用以下两种方法均可:
window.open('/url/download?param=xxx')
window.location = '/url/download?param=xxx' // 不加href,是因为有些浏览器有兼容问题
但如果window.open是在一个ajax回调里执行,浏览器会被安全拦截,解决方案:
$.ajax({
....
success: function() {
var win = window.open()
win.location = '/url/download?param=xxx'
}
})
或直接用window.location
$.ajax({
....
success: function() {
window.location = '/url/download?param=xxx'
}
})
二、前端直接将json数据处理成excel文件
具体完整代码如下:
<button onclick='tableToExcel()'>json导出xls文件</button>
<script>
function tableToExcel() {
var jsonData = [{
name: '路人甲',
phone: '123456',
email: '123@123456.com'
}, {
name: '炮灰乙',
phone: '123456',
email: '123@123456.com'
}]
//列标题
var table = '<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>'
//循环遍历,每行加入tr标签,每个单元格加td标签
jsonData.forEach(function(item) {
table += '<tr>';
for (let key in item) {
//增加\t为了不让表格显示科学计数法或者其他格式
table += `<td>${item[key] + '\t'}</td>`
}
table += '</tr>';
})
//Worksheet名
var worksheet = 'Sheet1'
//下载的表格模板数据
var template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--[if gte mso 9]>
<xml>
<x:ExcelWorkbook>
<x:ExcelWorksheets>
<x:ExcelWorksheet>
<x:Name>${worksheet}</x:Name>
<x:WorksheetOptions>
<x:DisplayGridlines/>
</x:WorksheetOptions>
</x:ExcelWorksheet>
</x:ExcelWorksheets>
</x:ExcelWorkbook>
</xml>
<![endif]-->
</head>
<body>
<table>${table}</table>
</body>
</html>`
// 下载模板
window.location.href = 'data:application/vnd.ms-excel;base64,' + base64(template)
}
//输出base64编码
function base64(s) { return window.btoa(unescape(encodeURIComponent(s))) }
</script>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。