前后端导出/下载excel方法

最新推荐文章于 2024-04-18 14:03:10 发布

web前端开发V

最新推荐文章于 2024-04-18 14:03:10 发布

阅读量5.6k

点赞数 2

640?wx_fmt=jpeg

一、通过后端处理导出

1.) 后端响应头设置

前端若想下载一个根据查询参数生成的excel报表文件，需要后端设置请求内容的类型，具体设置如下：

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>`
 // 下载模板