Table用JS導出Excel格式後數字格式問題

最近做一個將Table數據導出到Excel的需求,從網上找了兩款對應的代碼,我用的是 使用JS將Table數據導出到Excel裏(2中方法)裏的第二種,剛開始感覺挺好的,之後發現有點不對勁,數據若是000002的話,轉到Excel後就變成2了。
描述:我這個表單用有的數據是000開頭的
我這個表單用有的數據是000開頭的
數據一個是001、002、003纔對
數據一個是001、002、003纔對
然後分析出原因,使用JS將Table數據導出到Excel中,如果td中書純數字的話,在Excel格式就是number類型,所以,想001會變成1這種的。
於是乎就在網上百度找對應的解決辦法,在轉換導入到Excel前給給類型變成字符串String類型。
百度上是這樣的,在td中加一個樣式 style=‘mso-number-format:"@"’,如這樣的

<td style='mso-number-format:"\@"'><label class="text">000001</label></td>

我在想我能不能在調用導出Excel的公共方法中做處理,給他加上呢,
發現調用導出Excel的公共方法中可以做批量修改,(直接貼上改後代碼)

var tableToExcel = (function() {
  var uri = 'data:application/vnd.ms-excel;base64,',
      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>',
      base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) ;},
      format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }); };
  
  return function(table, name, filename) {
	if (!table.nodeType) table = document.getElementById(table);
	
	//console打印出table.innerHTML出則是table的頁面代碼
	//根據正則表達式,把style='mso-number-format:"\@"' 塞入td中,將數據轉成String
	table.innerHTML = table.innerHTML.replace(/<td/g, "<td STYLE='MSO-NUMBER-FORMAT:\\@'"); 
	
    var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML };//此時的innerHTML數據可以自己自定義 比如json轉化 只要值要數據符合即可
    var link = document.createElement("A");
    link.href = uri + base64(format(template, ctx));
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };
});

修改後:現在的數據則是正確的,得到自己想要的效果
現在的數據則是正確的,得到自己想要的效果
查看Excel源碼,發現都已經視str類型的了
查看Excel源碼,發現都已經視str類型的了

記錄,總結,分享!學習永遠在路上!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章