快捷導(dǎo)航

javascript導(dǎo)出csv文件（excel）的方法示例

更新時(shí)間：2019年08月25日 10:29:44 作者：楊冠標(biāo)

這篇文章主要給大家介紹了關(guān)于javascript導(dǎo)出csv文件（excel）的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用javascript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

這里貼出JavaScript導(dǎo)出csv文件（excel）的代碼。

/**
 * 導(dǎo)出excel
 * @param {Object} title  標(biāo)題列key-val
 * @param {Object} data   值列key-val
 * @param {Object} fileName  文件名稱
 */
function JSONToExcelConvertor(title, data, fileName) {
 var CSV = '';
 var row = "";

 for (var i = 0; i < title.length; i++) {
  if(title[i].title){
   row += title[i].title + ',';
  }
 }
 row = row.slice(0, -1);
 CSV += row + '\r\n';

 for (var i = 0; i < data.length; i++) {
  var row = "";
  for (var j = 0; j < title.length; j++) {
   if(title[j].title){
    row += '"' + (data[i][title[j].field] ? data[i][title[j].field] : "") + '"\t,';
   }
  }
  row.slice(0, row.length - 1);
  CSV += row + '\r\n';
 }

 if (CSV == '') {
  alert("Invalid data");
  return;
 }

 var fileName = fileName;
 var uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURI(CSV);
 var link = document.createElement("a");
 link.href = uri;

 link.style = "visibility:hidden";
 link.download = fileName + ".csv";
 document.body.appendChild(link);
 link.click();
 document.body.removeChild(link);
}

上面的寫法，如果excel中的數(shù)據(jù)太多，就會(huì)導(dǎo)致無法導(dǎo)出的結(jié)果，原因是瀏覽器對(duì)URL的長(zhǎng)度有限制，因此要使用Blob對(duì)象和window.URL.createObjectURL()方法做一下改造。

window.URL.createObjectURL()方法可以直接生成blob:開頭的鏈接，該鏈接產(chǎn)生于瀏覽器端，不會(huì)占用服務(wù)器資源。

/**
 * 導(dǎo)出excel
 * @param {Object} title  標(biāo)題列key-val
 * @param {Object} data   值列key-val
 * @param {Object} fileName  文件名稱
 */
function JSONToExcelConvertor(title, data, fileName) {
 var CSV = '';
 var row = "";

 for (var i = 0; i < title.length; i++) {
  if(title[i].title){
   row += title[i].title + ',';
  }
 }
 row = row.slice(0, -1);
 CSV += row + '\r\n';

 for (var i = 0; i < data.length; i++) {
  var row = "";
  for (var j = 0; j < title.length; j++) {
   if(title[j].title){
    row += '"' + (data[i][title[j].field] ? data[i][title[j].field] : "") + '"\t,';
   }
  }
  row.slice(0, row.length - 1);
  CSV += row + '\r\n';
 }

 if (CSV == '') {
  alert("Invalid data");
  return;
 }

 var fileName = fileName;
 var uri = new Blob(['\ufeff' + CSV], {type:"text/csv"});
 var link = document.createElement("a");
 link.href = URL.createObjectURL(uri);

 link.style = "visibility:hidden";
 link.download = fileName + ".csv";
 document.body.appendChild(link);
 link.click();
 document.body.removeChild(link);
}

然而，雖然window.URL.createObjectURL()方法在IE10、 IE11以及Microsoft Edge中能生成的blob:鏈接，但是卻不能把它加到一個(gè)<a>節(jié)點(diǎn)上，也不能直接在瀏覽器地址欄打開訪問，否則會(huì)得到【SCRIPT5：拒絕訪問。】錯(cuò)誤。甚至，IE9根本不支持調(diào)用window.URL.createObjectURL()方法創(chuàng)建Blob URLs。

Microsoft Internet Explorer / Microsoft Edge和高大上的Google Chrome / Mozilla Firefox對(duì)于window.URL.createObjectURL()方法創(chuàng)建Blob鏈接最直觀的區(qū)別在于得到的blob:鏈接形式不一樣，分別在微軟瀏覽器和標(biāo)準(zhǔn)瀏覽器中運(yùn)行new Blob()代碼，會(huì)得到兩種Blob鏈接形式，第一種為chrome和firefox生成的帶有當(dāng)前域名的標(biāo)準(zhǔn)blob:鏈接形式，第二種為Microsoft IE和Microsoft Edge生成的不帶域名的blob:鏈接。那么我們就可以通過window.URL.createObjectURL(new Blob()) . indexOf(location.host) < 0表達(dá)式來檢測(cè)是否是IE或早期生成Object URL不帶域名的Edge，如果表達(dá)式返回true則是IE或Edge舊版本。

事實(shí)上，Blob URL不被支持是出于IE瀏覽器對(duì)安全性的考慮（IE瀏覽器真安全啊，牛逼），然后它自己提供了一套API用來創(chuàng)建或下載Blob文件：msSaveOrOpenBlob。

/**
 * 導(dǎo)出excel
 * @param {Object} title  標(biāo)題列key-val
 * @param {Object} data   值列key-val
 * @param {Object} fileName  文件名稱
 */
function JSONToExcelConvertor(title, data, fileName) {
 var CSV = '';
 var row = "";

 for (var i = 0; i < title.length; i++) {
  if(title[i].title){
   row += title[i].title + ',';
  }
 }
 row = row.slice(0, -1);
 CSV += row + '\r\n';

 for (var i = 0; i < data.length; i++) {
  var row = "";
  for (var j = 0; j < title.length; j++) {
   if(title[j].title){
    row += '"' + (data[i][title[j].field] ? data[i][title[j].field] : "") + '"\t,';
   }
  }
  row.slice(0, row.length - 1);
  CSV += row + '\r\n';
 }

 if (CSV == '') {
  alert("Invalid data");
  return;
 }

 var fileName = fileName;
 var uri = new Blob(['\ufeff' + CSV], {type:"text/csv"});

 if (window.navigator && window.navigator.msSaveOrOpenBlob) { // for IE
  window.navigator.msSaveOrOpenBlob(CSV, fileName + ".csv");
 } else { // for Non-IE（chrome、firefox etc.）
  var link = document.createElement("a");
  link.href = URL.createObjectURL(uri);

  link.style = "visibility:hidden";
  link.download = fileName + ".csv";
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
 }
}

因此就得出上面最終的代碼。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: