純js匯出excel檔案
第一種方法：
function tableToExcel(){
//要匯出的json資料
const jsonData = [
{
name:'路人甲',
phone:'123456789',
email:'[email protected]'
},
{
name:'炮灰乙',
phone:'123456789',
email:'[email protected]'
},
{
name:'土匪丙',
phone:'123456789',
email:'[email protected]'
},
{
name:'流氓丁',
phone:'123456789',
email:'[email protected]'
},
]
//列標題，逗號隔開，每一個逗號就是隔開一個單元格
let str = `姓名,電話,郵箱\n`;
//增加\t為了不讓表格顯示科學計數法或者其他格式
for(let i = 0 ; i < jsonData.length ; i++ ){
for(let item in jsonData[i]){
str+=`${jsonData[i][item] + '\t'},`;
}
str+='\n';
}
//encodeURIComponent解決中文亂碼
let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
//通過建立a標籤實現
let link = document.createElement("a");
link.href = uri;
//對下載的檔案命名
link.download = "json資料表.csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
原部落格引用：https://blog.csdn.net/qaakd/article/details/108105564
第二種
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>匯出excel例項</title> </head> <body> <table id="data"> <tr> <th>序號</th> <th>姓名</th> <th>年齡</th> </tr> <tr> <td>1</td> <td>張三</td> <td>25</td> </tr> <tr> <td>2</td> <td>李四</td><td>30</td> </tr> </table> <!--必須是a標籤，如果是button標籤沒有href屬性，無法設定href屬性，最後不能生成excel檔案--> <a id="toExcel">匯出excel</a> </body> <script> var element = document.getElementById("toExcel") var toExcel = function(event) { // 獲得表格資料的html標籤和文字d; var html = "<html><head><meta charset='UTF-8'></head><body>"+document.getElementById("data").outerHTML+"</body></html>"; // 建立一個Blob物件，第一個引數是檔案的資料，第二個引數是檔案型別屬性物件 var blob = new Blob([html],{type:"application/vnd.ms-excel"}); var a = event.target; // 利用URL的createObjectURL方法為元素a生成blobURL a.href = URL.createObjectURL(blob); // 設定檔名 a.download = "人員表"; } element.onclick = toExcel; </script> </html>
引用：https://blog.csdn.net/weixin_42034055/article/details/93752471?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1.control