先後端導出/下載excel方法

時間 2019-12-06

標籤後端導出下載 excel 方法欄目 Microsoft Office 简体版

原文原文鏈接

1、經過後端處理導出

1.) 後端響應頭設置

前端若想下載一個根據查詢參數生成的excel報表文件，須要後端設置請求內容的類型，具體設置以下：html

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回調裏執行，瀏覽器會被安全攔截，解決方案：java

$.ajax({
    ....
    success: function() {
        var win = window.open()
        win.location = '/url/download?param=xxx'
    }
})

或直接用window.locationajax

$.ajax({
    ....
    success: function() {
        window.location = '/url/download?param=xxx'
    }
})

2、前端直接將json數據處理成excel文件

具體完整代碼以下：json

<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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。