js導出excel

時間 2019-12-11

原文原文鏈接

js導出Excel的方法

利用html的table表格的格式書寫想要的excel格式

獲取table的內容並組裝成一個xls格式的字符串

利用Blob對象生成一個xls格式的文件

利用a標籤的download屬性建立文件名，並下載到本地

舉例：javascript

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style media="screen">
    .tableA {
      border-collapse: collapse;
    }

    .tableA .title th {
      height: 50px;
      font-size: 24px;
      font-family: '微軟雅黑';
      font-weight: 700;
    }

    .tableA tr th {
      border: 1px #000 solid;
      height: 40px;
      background: #efefef;
    }

    .tableA tr td {
      padding: 0 40px;
      border: 1px #000 solid;
      height: 40px;
      text-align: center;
    }

    .tableA .footer td {
      font-size: 20px;
      font-weight: 700;
    }
  </style>
</head>

<body>
  <table bordercolor="black" class="tableA">
    <tr class="title">
      <th colspan="4">學生信息</th>
    </tr>
    <tr>
      <th>名字</th>
      <th>性別</th>
      <th>年齡</th>
      <th>班級</th>
    </tr>
    <tr>
      <td>小明</td>
      <td>男</td>
      <td>19</td>
      <td>1班</td>
    </tr>
    <tr>
      <td>小黃</td>
      <td>男</td>
      <td>20</td>
      <td>2班</td>
    </tr>
    <tr>
      <td>老王</td>
      <td>男</td>
      <td>29</td>
      <td>3班</td>
    </tr>
    <tr class="footer">
      <td colspan="4">總人數：3人</td>
    </tr>
  </table>
  <p id="insert"></p>
</body>

</html>
<script>
  //獲取table的html內容了，裏面包括標籤的class或id等。
  var oHtml = document.getElementsByClassName('tableA')[0].outerHTML;
  // 這裏將table和style組成一個html，使用模板字符串
  var excelHtml = `
    <html>
      <head>
        <meta charset='utf-8' />
        <style>
          .tableA {
            border-collapse: collapse;
          }
          .tableA .title th{
            height: 50px;
            font-size: 24px;
            font-family: '微軟雅黑';
            font-weight: 700;
          }
          .tableA tr th {
            border: 1px #000 solid;
            height: 40px;
            background: #efefef;
          }
          .tableA tr td {
            padding: 0 40px;
            border: 1px #000 solid;
            height: 40px;
            text-align: center;
          }
          .tableA .footer td {
            font-size: 20px;
            font-weight: 700;
          }
        </style>
      </head>
      <body>
        ${oHtml}
      </body>
    </html>
  `;
  // 生成xls文件並經過a標籤下載到本地

  // 生成Excel
  var excelBlob = new Blob([excelHtml], {
    type: 'application/vnd.ms-excel'
  })

  // 經過a標籤下載到本地了，下載前能夠利用a標籤的download屬性命名
  // 建立一個a標籤
  var oA = document.createElement('a');
  // 利用URL.createObjectURL()方法爲a元素生成blob URL
  oA.href = URL.createObjectURL(excelBlob);
  // 給文件命名
  oA.download = '學生名單.xls';
  oA.innerHTML = "點擊下載"

  document.getElementById('insert').append(oA)
</script>

來看看在瀏覽器顯示的效果以下，在這裏我是給table增長了樣式的css

======================================= 解釋以下 ==================================================================html

先寫一個正常的html表格java

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style media="screen"> .tableA { border-collapse: collapse; } .tableA .title th{ height: 50px; font-size: 24px; font-family: '微軟雅黑'; font-weight: 700; } .tableA tr th { border: 1px #000 solid; height: 40px; background: #efefef; } .tableA tr td { padding: 0 40px; border: 1px #000 solid; height: 40px; text-align: center; } .tableA .footer td { font-size: 20px; font-weight: 700; } </style> </head> <body> <table bordercolor="black" class="tableA"> <tr class="title"> <th colspan="4">學生信息</th> </tr> <tr> <th>名字</th> <th>性別</th> <th>年齡</th> <th>班級</th> </tr> <tr> <td>小明</td> <td>男</td> <td>19</td> <td>1班</td> </tr> <tr> <td>小黃</td> <td>男</td> <td>20</td> <td>2班</td> </tr> <tr> <td>老王</td> <td>男</td> <td>29</td> <td>3班</td> </tr> <tr class="footer"> <td colspan="4">總人數：3人</td> </tr> </table> </body> </html>

來看看在瀏覽器顯示的效果以下，在這裏我是給table增長了樣式的：
es6

獲取table的內容裝成一個xls格式的字符串

接下來就是獲取table的html內容了，裏面包括標籤的class或id等。json

var oHtml = document.getElementsByClassName('tableA')[0].outerHTML;

這裏將table和style組成一個html，
【附上es6字符串模板連接[es6字符串模板][1]】
[1]:http://es6.ruanyifeng.com/#docs/string#模板字符串 "es6字符串模板"瀏覽器

// 這裏我是用了es6的字符串語法``和${},對es6不熟悉的同窗能夠去查一下。 // 有沒有發現我這裏的樣式就是和HTML上的style複製下來的， var excelHtml = ` <html> <head> <meta charset='utf-8' /> <style> .tableA { border-collapse: collapse; } .tableA .title th{ height: 50px; font-size: 24px; font-family: '微軟雅黑'; font-weight: 700; } .tableA tr th { border: 1px #000 solid; height: 40px; background: #efefef; } .tableA tr td { padding: 0 40px; border: 1px #000 solid; height: 40px; text-align: center; } .tableA .footer td { font-size: 20px; font-weight: 700; } </style> </head> <body> ${oHtml} </body> </html> `;

生成xls文件並經過a標籤下載到本地

前面的準備工做就差很少了，接下來就是將字符串轉成xls文件了，這裏主要利用Blob對象和URL.createObjectURL() 方法app

Blob對象表示不可變的相似文件對象的原始數據。Blob表示不必定是JavaScript原生形式的數據。 File 接口基於Blob，繼承了 blob的功能並將其擴展使其支持用戶系統上的文件。

URL.createObjectURL() 靜態方法會建立一個 DOMString，其中包含一個表示參數中給出的對象的URL。這個 URL 的生命週期和建立它的窗口中的 document 綁定。這個新的URL 對象表示指定的 File 對象或 Blob 對象。

Blob 構造函數用法舉例（生成一個json文件）：函數

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)],
  {type : 'application/json'});

一樣道理利用第二個步驟的字符串生成Excelui

var excelBlob = new Blob([excelHtml], {type: 'application/vnd.ms-excel'})

最後一步就是經過a標籤下載到本地了，下載前能夠利用a標籤的download屬性命名

// 建立一個a標籤
var oA = document.createElement('a');
// 利用URL.createObjectURL()方法爲a元素生成blob URL
oA.href = URL.createObjectURL(excelBlob);
// 給文件命名
oA.download = '學生名單.xls';

最後生成的xls效果以下：

能夠看出和瀏覽器的樣式除了涉及到px的會有誤差，其它設置都是生效的，只要微調一下就能夠達到想要的效果了

ps:由於權限問題，生成的excel的格式只能爲.xls並且每次打開都會彈窗詢問。因此建議打開後另存一份excel

轉自：

https://www.cnblogs.com/suyuanli/p/7945102.html

相關標籤/搜索

每日一句

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