成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

【HTML5版】導(dǎo)出Table數(shù)據(jù)并保存為Excel

abson / 3027人閱讀

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

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

最近接到這么個(gè)需求，要把

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

Google之，發(fā)現(xiàn)HTML5又成了一座分水嶺。之前在IE瀏覽器下，用戶可以利用ActiveXObject創(chuàng)建Excel.application對(duì)象來處理——當(dāng)然不兼容Mac。后來Excel開放標(biāo)準(zhǔn)，可以導(dǎo)出xml格式的文件，dataURI就有了用武之地，導(dǎo)出

數(shù)據(jù)并保存為Excel有了更好的選擇。

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

準(zhǔn)備工作

創(chuàng)建一個(gè)空白的Excel文檔

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

好了，模版搞定

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

template = "
  
  
  
    {{#each tables}}
{{{this}}}
{{/each}} "; 復(fù)制表格數(shù)據(jù)

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

display:none

表單元素，type="hidden"

寬高為0

父級(jí)以上節(jié)點(diǎn)不顯示，自己也不會(huì)顯示

所以，不能先clone()再find(":hidden").remove()，因?yàn)闆]添加到主Dom樹的節(jié)點(diǎn)寬高都是0，也就會(huì)被認(rèn)為還沒顯示，這下就都干掉了。

輸出內(nèi)容

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

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

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

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

var uri = "data:application/vnd.ms-excel;base64,";
location.href = uri + base64(template(tables));
提升體驗(yàn)

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

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

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

 導(dǎo)出

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中不會(huì)打印的部分
    t.find("a").replaceWith(function (i) { // 表格中不再需要的超鏈接也移除了
      return this.innerHTML;
    });
    table = table ? table.add(t) : t;
  });
  event.currentTarget.href = Dianjoy.utils.tableToExcel(table, "廣告數(shù)據(jù)");
}
尾聲

說是圓滿，其實(shí)也不盡然，因?yàn)閁RL有2M的長度限制，遇到真正的大表仍然可能出問題（我沒實(shí)測）。

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/77929.html

相關(guān)文章

  • 使用js-xlsx純前端導(dǎo)出excel

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

    Cheriselalala 評(píng)論0 收藏0

  • 使用js-xlsx純前端導(dǎo)出excel

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

    inapt 評(píng)論0 收藏0

  • 使用js-xlsx純前端導(dǎo)出excel

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

    LeanCloud 評(píng)論0 收藏0

  • 【實(shí)戰(zhàn)教程】使用云函數(shù)將數(shù)據(jù)表導(dǎo)出為 Excel 文件

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

    iOS122 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

abson

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<