javascript導出csv文件（excel）
- 2019 年 10 月 3 日
- 筆記
這裡貼出JavaScript導出csv文件（excel）的程式碼。
/** * 導出excel * @param {Object} title 標題列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 + 'rn'; 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 + 'rn'; } 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中的數據太多，就會導致無法導出的結果，原因是瀏覽器對URL的長度有限制，因此要使用Blob對象和window.URL.createObjectURL()方法做一下改造。
window.URL.createObjectURL()方法可以直接生成blob:開頭的鏈接，該鏈接產生於瀏覽器端，不會佔用伺服器資源。
/** * 導出excel * @param {Object} title 標題列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 + 'rn'; 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 + 'rn'; } 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:鏈接，但是卻不能把它加到一個<a>節點上，也不能直接在瀏覽器地址欄打開訪問，否則會得到【SCRIPT5：拒絕訪問。】錯誤。甚至，IE9根本不支援調用window.URL.createObjectURL()方法創建Blob URLs。
Microsoft Internet Explorer / Microsoft Edge和高大上的Google Chrome / Mozilla Firefox對於window.URL.createObjectURL()方法創建Blob鏈接最直觀的區別在於得到的blob:鏈接形式不一樣，分別在微軟瀏覽器和標準瀏覽器中運行new Blob()程式碼，會得到兩種Blob鏈接形式，第一種為chrome和firefox生成的帶有當前域名的標準blob:鏈接形式，第二種為Microsoft IE和Microsoft Edge生成的不帶域名的blob:鏈接。那麼我們就可以通過window.URL.createObjectURL(new Blob()) . indexOf(location.host) < 0表達式來檢測是否是IE或早期生成Object URL不帶域名的Edge，如果表達式返回true則是IE或Edge舊版本。
事實上，Blob URL不被支援是出於IE瀏覽器對安全性的考慮（IE瀏覽器真安全啊，牛逼），然後它自己提供了一套API用來創建或下載Blob文件：msSaveOrOpenBlob。
/** * 導出excel * @param {Object} title 標題列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 + 'rn'; 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 + 'rn'; } 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); } }
因此就得出上面最終的程式碼。
"就算臨別也要通電話。"