前后端导出/下载excel方法

最新推荐文章于 2024-06-23 00:14:15 发布

weixin_33850890

最新推荐文章于 2024-06-23 00:14:15 发布

阅读量3.1k

点赞数 1

文章标签：后端前端 java ViewUI

原文链接：https://segmentfault.com/a/1190000016220106

版权

一、通过后端处理导出

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>

weixin_33850890

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
前后端导出/下载excel方法

一、通过后端处理导出1.) 后端响应头设置前端若想下载一个根据查询参数生成的excel报表文件，需要后端设置请求内容的类型，具体设置如下： response.reset(); response.setContentType("application/vnd.ms-excel;charset=utf-8"); // 表明...
复制链接

扫一扫