【HTML5版】導出Table數據并保存為Excel

abson 發布于2019-08-19 14:20 / 2887人閱讀

摘要：首發我的博客最近接到這么個需求，要把顯示的數據導出成表。之，發現又成了一座分水嶺。后來開放標準，可以導出格式的文件，就有了用武之地，導出數據并保存為有了更好的選擇。輸出內容套用模版之后，我們就有了完整的表格數據。至此，此項功能宣告圓滿。

首發我的博客 http://blog.meathill.com/tech/js/export-table-data-into-a-excel-file.html

最近接到這么個需求，要把

顯示的數據導出成Excel表。類似的需求并不稀罕，過去我通常用PHP輸出.csv文件，不過這次似乎不能這么做：數據源表格允許用戶篩選和排序，與原始數據表有區別，而傳遞操作又比較麻煩；另外.csv文件的功能受限嚴重，難以擴展。所以我準備嘗試下別的做法。

Google之，發現HTML5又成了一座分水嶺。之前在IE瀏覽器下，用戶可以利用ActiveXObject創建Excel.application對象來處理——當然不兼容Mac。后來Excel開放標準，可以導出xml格式的文件，dataURI就有了用武之地，導出

數據并保存為Excel有了更好的選擇。

（以下內容與StackOverflow中的答案有重合，那個3條贊同的我認為是最佳答案，可惜我沒法頂他……）

準備工作

創建一個空白的Excel文檔

另存為“XML表格”，xml格式

好了，模版搞定

圖省事兒的也可以直接使用我的模板（這一段我使用了Handlebars，以便將來填充數據）

template = "
  
  
  
    {{#each tables}}

{{{this}}}

{{/each}} "; 復制表格數據

復制數據比較簡單了。如前面模版所示，這里我很野蠻的直接復制thead和tbody的全部代碼，填充內容。當然為了體現用戶操作，我只復制顯示的tr。這里需要注意的是，jQuery判斷一個dom是否處于顯示狀體基于以下3點：

display:none

表單元素，type="hidden"

寬高為0

父級以上節點不顯示，自己也不會顯示

所以，不能先clone()再find(":hidden").remove()，因為沒添加到主Dom樹的節點寬高都是0，也就會被認為還沒顯示，這下就都干掉了。

輸出內容

套用模版之后，我們就有了完整的表格數據。接下來，我們需要把其轉換成base64格式，以便套用dataURI輸出。于是便要使用btoa這個函數（將二進制數據轉換成base64格式的字符串，HTML5的大禮之一，操作二進制的API），不過注意，這個函數不能直接轉換普通unicode字符，不然大多數瀏覽器都會拋出異常。所以需要先經過兩步轉換：

function base64(string) {
  return window.btoa(unescape(encodeURIComponent(string)));
}

（MDN中還推薦了另外一種做法，通過Typed Array做中介，我沒有實操，有興趣的可以試下）

然后配上base64頭和mime類型，就可以觸發下載了：

var uri = "data:application/vnd.ms-excel;base64,";
location.href = uri + base64(template(tables));

提升體驗

貌似到這里就完成了，不過作為一名掛職產品總監的碼農，我很難容忍下載的文件文件名是“下載”，而且還沒有擴展名（Windows 8下沒有；Windows 7 和 Mac下會有.xls的擴展名，我認為和已裝軟件注冊過的mime類型有關）。

這是個用在內部管理后臺的需求，我之前曾要求大家必須使用Chrome訪問后臺；而且我知道，Chrome已經支持里的download屬性。那么這就好辦了，因為onclick事件會先于系統默認行為觸發，所以我可以在這個事件的處理函數中將生成的Base64放在被點擊按鈕的href里，并將其download屬性設為容易理解的“某年某月末日至某年某月某日廣告數據分析.xls”。至此，此項功能宣告圓滿。

HTML部分（使用到Bootstrap和Handlebars）：

 導出

JavaScript部分

tableToExcel: function (tableList, name) {
  var tables = [],
      uri = "data:application/vnd.ms-excel;base64,",
      template = Handlebars.compile("{{#each tables}}{{{this}}}{{/each}}");

  for (var i = 0; i < tableList.length; i++) {
    tables.push(tableList[i].innerHTML);
  }
  var data = {
    worksheet: name || "Worksheet",
    tables: tables
  };
  return uri + base64(template(data));
},
exportHandler: function (event) {
  var tables = this.$("table"),
      table = null;
  tables.each(function (i) {
    var t = $("
");
    t.find("thead").html(this.tHead.innerHTML);
    t.find("tbody").append($(this.tBodies).children(":visible").clone());
    t.find(".not-print").remove(); // not-print 是@media print中不會打印的部分
    t.find("a").replaceWith(function (i) { // 表格中不再需要的超鏈接也移除了
      return this.innerHTML;
    });
    table = table ? table.add(t) : t;
  });
  event.currentTarget.href = Dianjoy.utils.tableToExcel(table, "廣告數據");
}

尾聲

說是圓滿，其實也不盡然，因為URL有2M的長度限制，遇到真正的大表仍然可能出問題（我沒實測）。

最后例行吐槽：老板（領導）想提升工作效率，光逼員工沒啥意義，必須關注員工日常使用的軟件：不許用亂七八糟的瀏覽器，統一Chrome；360一率禁用（最近遇到N起升級Chrome Dev 30版導致各種bug的問題）；全部裝Windows 8（自帶殺毒，幾乎所有外設秒配）。能做到這幾點，公司辦公效率提升1倍不止。

再多說兩句：我們對外的后臺雖然做到了基本兼容，但如果用戶使用非Chrome訪問，仍然會建議他換用Chrome。目前Chrome訪問占比已經上升到90%，IE678不到5%，希望不久的將來，我們的用戶都能盡情享受HTML5帶來的優秀體驗，我們的開發成本也能降得更低。

云服務器 GPU云服務器 table導出excel 表格導出為Excel js 數據導出excel js導入導出excel數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/77929.html

使用js-xlsx純前端導出excel

摘要：前言最近公司需要將幾張統計表格導出到由于公司現有導出功能是前后端配合的導出，覺得麻煩，所以想找一個純前端導出的工具，最后找到了，評價還是挺高的，但是中文文檔沒找到百度也沒有找到一個比較全面的教程所以踩了很多坑，自己記錄下，方便以后使用。前言最近公司需要將幾張統計表格導出到excel,由于公司現有導出excel功能是前后端配合的導出，覺得麻煩，所以想找一個純前端導出的工具，最后找到了...

Cheriselalala 2019-08-02 15:28 評論0 收藏0
使用js-xlsx純前端導出excel

摘要：前言最近公司需要將幾張統計表格導出到由于公司現有導出功能是前后端配合的導出，覺得麻煩，所以想找一個純前端導出的工具，最后找到了，評價還是挺高的，但是中文文檔沒找到百度也沒有找到一個比較全面的教程所以踩了很多坑，自己記錄下，方便以后使用。前言最近公司需要將幾張統計表格導出到excel,由于公司現有導出excel功能是前后端配合的導出，覺得麻煩，所以想找一個純前端導出的工具，最后找到了...

LeanCloud 2019-08-30 11:21 評論0 收藏0
使用js-xlsx純前端導出excel

摘要：前言最近公司需要將幾張統計表格導出到由于公司現有導出功能是前后端配合的導出，覺得麻煩，所以想找一個純前端導出的工具，最后找到了，評價還是挺高的，但是中文文檔沒找到百度也沒有找到一個比較全面的教程所以踩了很多坑，自己記錄下，方便以后使用。前言最近公司需要將幾張統計表格導出到excel,由于公司現有導出excel功能是前后端配合的導出，覺得麻煩，所以想找一個純前端導出的工具，最后找到了...

inapt 2019-08-23 18:33 評論0 收藏0
【實戰教程】使用云函數將數據表導出為 Excel 文件

摘要：本文將介紹通過知曉云云函數來實現將數據表導出為文件的功能，并使用和將代碼打包上傳到知曉云。在日常的工作中，常常需要根據運營需求對數據進行各種格式的處理和導出。導出后，不少人偏愛將數據放入 excel 在進行處理。一般來說，處理數據導出時需要對數據進行一些運算整理。在以前，處理的方式是在一臺獨立的服務器上跑腳本。而現在有了知曉云，不再需要維護服務器，直接寫代碼就能把相關事都都丟給云...

iOS122 2019-08-26 13:33 評論0 收藏0
純前端開發案例：用 SpreadJS 搭建信息系統軟件開發平臺

摘要：葡萄城的是一個基于技術的純控件，控件性能流暢，有類似的在線表格編輯器，適合非專業程序員設計報表模板，很符合平臺部分無編碼開發的理念。葡萄城控件產品對于項目的價值控件主要用于本項目中的報表設計，展示，打印等功能。 showImg(https://segmentfault.com/img/bVbalYk?w=1000&h=400); 華閩通達 - R 平臺應用所使用產品：SpreadJS ...

Heier 2019-08-22 17:08 評論0 收藏0