17

一、通过后端处理导出

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>

安静de沉淀
6.5k 声望282 粉丝

忙起来像个狗?,轻松起来像只猫?,没工作闲得像条鱼?