一、通过后端处理导出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>