js 實(shí)現(xiàn)純前端將數(shù)據(jù)導(dǎo)出excel兩種方式，親測(cè)有效
方法一
將table標(biāo)簽，包括tr、td等對(duì)json數(shù)據(jù)進(jìn)行拼接，將table輸出到表格上實(shí)現(xiàn)，這種方法的弊端在于輸出的是偽excel，雖說(shuō)生成xls為后綴的文件，但文件形式上還是html，代碼如下
<html>
<head>
? ? <p style="font-size: 20px;color: red;">使用table標(biāo)簽方式將json導(dǎo)出xls文件</p>
? ? <button onclick='tableToExcel()'>導(dǎo)出</button>
</head>
<body>
? ? <script>??
? ? const tableToExcel = () => {
? ? ? ? // 要導(dǎo)出的json數(shù)據(jù)
? ? ? ? const jsonData = [
? ? ? ? ? ? {
? ? ? ? ? ? ? ? name:'路人甲',
? ? ? ? ? ? ? ? phone:'123456',
? ? ? ? ? ? ? ? email:'123@123456.com'
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? name:'炮灰乙',
? ? ? ? ? ? ? ? phone:'123456',
? ? ? ? ? ? ? ? email:'123@123456.com'
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? name:'土匪丙',
? ? ? ? ? ? ? ? phone:'123456',
? ? ? ? ? ? ? ? email:'123@123456.com'
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? name:'流氓丁',
? ? ? ? ? ? ? ? phone:'123456',
? ? ? ? ? ? ? ? email:'123@123456.com'
? ? ? ? ? ? },
? ? ? ? ]
? ? ? ? // 列標(biāo)題
? ? ? ? let str = '<tr><td>姓名</td><td>電話</td><td>郵箱</td></tr>';
? ? ? ? // 循環(huán)遍歷，每行加入tr標(biāo)簽，每個(gè)單元格加td標(biāo)簽
? ? ? ? for(let i = 0 ; i < jsonData.length ; i++ ){
? ? ? ? ? ? str+='<tr>';
? ? ? ? ? ? for(const key in jsonData[i]){
? ? ? ? ? ? ? ? // 增加\t為了不讓表格顯示科學(xué)計(jì)數(shù)法或者其他格式
? ? ? ? ? ? ? ? str+=`<td>${ jsonData[i][key] + '\t'}</td>`;? ? ?
? ? ? ? ? ? }
? ? ? ? ? ? str+='</tr>';
? ? ? ? }
? ? ? ? // Worksheet名
? ? ? ? const worksheet = 'Sheet1'
? ? ? ? const uri = 'data:application/vnd.ms-excel;base64,';
?
? ? ? ? // 下載的表格模板數(shù)據(jù)
? ? ? ? const 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>`;
? ? ? ? // 下載模板
? ? ? ? window.location.href = uri + base64(template);
? ? };
?
? ? // 輸出base64編碼
? ? const base64 = s => window.btoa(unescape(encodeURIComponent(s)));
? ? </script>
</body>
</html>
方法二
通過(guò)將json遍歷進(jìn)行字符串拼接，將字符串輸出到csv文件，代碼如下
<html>
<head>
? ? <p style="font-size: 20px;color: red;">使用a標(biāo)簽方式將json導(dǎo)出csv文件</p>
? ? <button onclick='tableToExcel()'>導(dǎo)出</button>
</head>
<body>
? ? <script>
? ? const tableToExcel = () => {
? ? ? ? // 要導(dǎo)出的json數(shù)據(jù)
? ? ? ? const jsonData = [
? ? ? ? ? ? {
? ? ? ? ? ? ? ? name:'路人甲',
? ? ? ? ? ? ? ? phone:'123456789',
? ? ? ? ? ? ? ? email:'000@123456.com'
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? name:'炮灰乙',
? ? ? ? ? ? ? ? phone:'123456789',
? ? ? ? ? ? ? ? email:'000@123456.com'
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? name:'土匪丙',
? ? ? ? ? ? ? ? phone:'123456789',
? ? ? ? ? ? ? ? email:'000@123456.com'
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? name:'流氓丁',
? ? ? ? ? ? ? ? phone:'123456789',
? ? ? ? ? ? ? ? email:'000@123456.com'
? ? ? ? ? ? },
? ? ? ? ];
? ? ? ? // 列標(biāo)題，逗號(hào)隔開(kāi)，每一個(gè)逗號(hào)就是隔開(kāi)一個(gè)單元格
? ? ? ? let str = `姓名,電話,郵箱\n`;
? ? ? ? // 增加\t為了不讓表格顯示科學(xué)計(jì)數(shù)法或者其他格式
? ? ? ? for(let i = 0 ; i < jsonData.length ; i++ ){
? ? ? ? ? ? for(const key in jsonData[i]){
? ? ? ? ? ? ? ? str+=`${jsonData[i][key] + '\t'},`;? ? ?
? ? ? ? ? ? }
? ? ? ? ? ? str+='\n';
? ? ? ? }
? ? ? ? // encodeURIComponent解決中文亂碼
? ? ? ? const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
? ? ? ? // 通過(guò)創(chuàng)建a標(biāo)簽實(shí)現(xiàn)
? ? ? ? const link = document.createElement("a");
? ? ? ? link.href = uri;
? ? ? ? // 對(duì)下載的文件命名
? ? ? ? link.download =? "json數(shù)據(jù)表.csv";
? ? ? ? link.click();
? ? }
? ? </script>
</body>
</html>
需要更多的前端學(xué)習(xí)資料? ?點(diǎn)贊+評(píng)論學(xué)習(xí)
