溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用JavaScript怎么將數據導出為EXCEL？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
1、ActiveXObject(“Excel.Application”)
這種方法只能在IE下使用。
優點：參照VBA控制excel對象。（代碼不會的可以錄制宏）
缺點：引用cell對象太慢，上萬行數據導出時間超過2分鐘
2、以Table方式導出為html文件。
3、以CSV方式導出。
使用中發現如果數據較多，上述第2、3中方法會失效，因此又整理了第4種方法 toLargerCSV。
第4種方法在IE10、chrome測試通過
<html>
<head>
<div>以Table格式導為xls文件
<button onclick='TableToExcel()'>導出</button></div>
<div>導出CSV文件
<button onclick='toCSV()'>導出</button></div>
<div>大量數據導出CSV
<button onclick='toLargerCSV()'>導出</button></div>
</head>
<body>
<script>
//以Table格式導為xls文件
function TableToExcel(){
//要導出的json數據
var jsonData = [
{
name:'001',
id:'621699190001011231'
},
{
name:'002',
id:'52069919000101547X'
},
{
name:'003',
id:'423699190103015469'
},
{
name:'004',
id:'341655190105011749'
}
]
//導出前要將json轉成table格式
//列標題
var str = '<tr><td>name</td><td>id</td></tr>';
//具體數值 遍歷
for(let i = 0;i < jsonData.length;i++){
str += '<tr>';
for(let item in jsonData[i]){
var cellvalue = jsonData[i][item];
//不讓表格顯示科學計數法或者其他格式
//方法1 tr里面加 方法2 是改為 = 'XXXX'格式
//如果純數字且超過15位
/*var reg = /^[0-9]+.?[0-9]*$/;
if ((cellvalue.length>15) && (reg.test(cellvalue))){
//cellvalue = '="' + cellvalue + '"';
}*/
//此處用`取代'，具體用法搜索模板字符串 ES6特性
str+=`<td >${cellvalue}</td>`;
// str+=`<td>${cellvalue}</td>`;
}
str+='</tr>';
}
var worksheet = '導出結果'
var uri = 'data:application/vnd.ms-excel;base64,';
//下載的表格模板數據
var 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><!--[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>${str}</table></body></html>`;
//下載模板
function base64 (s) { return window.btoa(unescape(encodeURIComponent(s)))}
window.location.href = uri + base64(template);
}
function toCSV(){
//要導出的json數據
var jsonData = [
{
name:'001',
id:'621699190001011231'
},
{
name:'002',
id:'52069919000101547X'
},
{
name:'003',
id:'423699190103015469'
},
{
name:'004',
id:'341655190105011749'
}
]
//導出前要將json轉成table格式
//列標題
var str = 'name,id\n';
//具體數值 遍歷
for(let i = 0 ; i < jsonData.length ; i++ ){
for(let item in jsonData[i]){
//增加\t為了不讓表格顯示科學計數法或者其他格式
//此處用`取代'，具體用法搜索模板字符串 ES6特性
str+=`${jsonData[i][item] + '\t,'}`;
}
str+='\n';
}
let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
var link = document.createElement("a");
link.href = uri;
link.download = "導出.csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
//支持大批量數據導出，目前測試15萬行 30列通過，導出時間約為6秒
function toLargerCSV(){
//CSV格式可以自己設定，適用MySQL導入或者excel打開。
//由于Excel單元格對于數字只支持15位，且首位為0會舍棄 建議用 =“數值”
var str = '行號,內容,題目,標題\n';
for(let i=0;i<100000;i++){
str += i.toString()+',1234567890123456789\t,張三李四王五趙六,bbbb,\n'
}
var blob = new Blob([str], {type: "text/plain;charset=utf-8"});
//解決中文亂碼問題
blob = new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
object_url = window.URL.createObjectURL(blob);
var link = document.createElement("a");
link.href = object_url;
link.download = "導出.csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
</body>
</html>看完上述內容，你們掌握使用JavaScript怎么將數據導出為EXCEL的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
