由于项目需要，需要在不调用后台接口的情况下，将json数据导出到excel表格，参考了好多资料以及很多大佬写的博客终于实现，兼容chrome没问题，其他还没有测试过，这边介绍两种实现方式，并附上代码和gif动图，博主不才还望轻喷，代码可直接copy运行

将table标签，包括tr、td等对json数据进行拼接，将table输出到表格上实现，这种方法的弊端在于输出的是伪excel，虽说生成xls为后缀的文件，但文件形式上还是html，代码如下：

  1. <html>
  2. <meta charset="UTF-8">
  3. <head>
  4.     <p style="font-size: 20px;color: red;">使用table标签方式将json导出xls文件</p>
  5.     <button onclick=\'tableToExcel()\'>导出</button>
  6. </head>
  7. <body>
  8.     <script>  
  9.     const tableToExcel = () => {
  10.         // 要导出的json数据
  11.         const jsonData = [
  12.             {
  13.                 name:\'路人甲\',
  14.                 phone:\'123456\',
  15.                 email:\'123@123456.com\'
  16.             },
  17.             {
  18.                 name:\'炮灰乙\',
  19.                 phone:\'123456\',
  20.                 email:\'123@123456.com\'
  21.             },
  22.             {
  23.                 name:\'土匪丙\',
  24.                 phone:\'123456\',
  25.                 email:\'123@123456.com\'
  26.             },
  27.             {
  28.                 name:\'流氓丁\',
  29.                 phone:\'123456\',
  30.                 email:\'123@123456.com\'
  31.             },
  32.         ]
  33.         // 列标题
  34.         let str = \'<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>\';
  35.         // 循环遍历，每行加入tr标签，每个单元格加td标签
  36.         for(let i = 0 ; i < jsonData.length ; i++ ){
  37.             str+=\'<tr>\';
  38.             for(const key in jsonData[i]){
  39.                 // 增加\t为了不让表格显示科学计数法或者其他格式
  40.                 str+=`<td>${ jsonData[i][key] + \'\t\'}</td>`;     
  41.             }
  42.             str+=\'</tr>\';
  43.         }
  44.         // Worksheet名
  45.         const worksheet = \'Sheet1\'
  46.         const uri = \'data:application/vnd.ms-excel;base64,\';
  47.  
  48.         // 下载的表格模板数据
  49.         const template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" 
  50.         xmlns:x="urn:schemas-microsoft-com:office:excel" 
  51.         xmlns="http://www.w3.org/TR/REC-html40">
  52.         <meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">
  53.         <meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">
  54.         <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
  55.         <x:Name>${worksheet}</x:Name>
  56.         <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
  57.         </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
  58.         </head><body><table>${str}</table></body></html>`;
  59.         // 下载模板
  60.         window.location.href = uri + base64(template);
  61.     };
  62.  
  63.     // 输出base64编码
  64.     const base64 = s => window.btoa(unescape(encodeURIComponent(s)));
  65.     </script>
  66. </body>
  67. </html>

 

通过将json遍历进行字符串拼接，将字符串输出到csv文件，代码如下：

  1. <html>
  2. <head>
  3.     <p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件</p>
  4.     <button onclick=\'tableToExcel()\'>导出</button>
  5. </head>
  6. <body>
  7.     <script>
  8.     const tableToExcel = () => {
  9.         // 要导出的json数据
  10.         const jsonData = [
  11.             {
  12.                 name:\'路人甲\',
  13.                 phone:\'123456789\',
  14.                 email:\'000@123456.com\'
  15.             },
  16.             {
  17.                 name:\'炮灰乙\',
  18.                 phone:\'123456789\',
  19.                 email:\'000@123456.com\'
  20.             },
  21.             {
  22.                 name:\'土匪丙\',
  23.                 phone:\'123456789\',
  24.                 email:\'000@123456.com\'
  25.             },
  26.             {
  27.                 name:\'流氓丁\',
  28.                 phone:\'123456789\',
  29.                 email:\'000@123456.com\'
  30.             },
  31.         ];
  32.         // 列标题，逗号隔开，每一个逗号就是隔开一个单元格
  33.         let str = `姓名,电话,邮箱\n`;
  34.         // 增加\t为了不让表格显示科学计数法或者其他格式
  35.         for(let i = 0 ; i < jsonData.length ; i++ ){
  36.             for(const key in jsonData[i]){
  37.                 str+=`${jsonData[i][key] + \'\t\'},`;     
  38.             }
  39.             str+=\'\n\';
  40.         }
  41.         // encodeURIComponent解决中文乱码
  42.         const uri = \'data:text/csv;charset=utf-8,\ufeff\' + encodeURIComponent(str);
  43.         // 通过创建a标签实现
  44.         const link = document.createElement("a");
  45.         link.href = uri;
  46.         // 对下载的文件命名
  47.         link.download =  "json数据表.csv";
  48.         link.click();
  49.     }
  50.     </script>
  51. </body>
  52. </html>

 

  1. function exportExcel(JSONData, FileName, title, filter) {
  2.     if (!JSONData) return;
  3.     //转化json为object
  4.     var arrData = typeof JSONData != "object" ? JSON.parse(JSONData) : JSONData;
  5.     var excel = "<table>";
  6.     //设置表头
  7.     var row = "<tr>";
  8.     if (title) { //使用标题项
  9.       for (var i in title) {
  10.           if (filter.indexOf(i) == -1) {
  11.               row += "<th align=\'center\'>" + title[i] + "</th>";
  12.           }
  13.       }
  14.     } else {//不使用标题项
  15.       for (var i in arrData[0]) {
  16.           if (filter.indexOf(i) == -1) {
  17.               row += "<th align=\'center\'>" + i + "</th>";
  18.           }
  19.       }
  20.     }
  21.     excel += row + "</tr>";
  22.     //设置数据
  23.     for (var i = 0; i < arrData.length; i++) {
  24.       var row = "<tr>";
  25.       for (var index in arrData[i]) {
  26.         if (filter.indexOf(index) == -1) {
  27.             var value = arrData[i][index] == null ? "" : arrData[i][index];
  28.             row += "<td align=\'center\'>" + value + "</td>";
  29.         }
  30.       }
  31.       excel += row + "</tr>";
  32.     }
  33.     excel += "</table>";
  34.     var excelFile =
  35.       "<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\'>";
  36.     excelFile +=
  37.       \'<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">\';
  38.     excelFile +=
  39.       \'<meta http-equiv="content-type" content="application/vnd.ms-excel\';
  40.     excelFile += \'; charset=UTF-8">\';
  41.     excelFile += "<head>";
  42.     excelFile += "<!--[if gte mso 9]>";
  43.     excelFile += "<xml>";
  44.     excelFile += "<x:ExcelWorkbook>";
  45.     excelFile += "<x:ExcelWorksheets>";
  46.     excelFile += "<x:ExcelWorksheet>";
  47.     excelFile += "<x:Name>";
  48.     excelFile += "{worksheet}";
  49.     excelFile += "</x:Name>";
  50.     excelFile += "<x:WorksheetOptions>";
  51.     excelFile += "<x:DisplayGridlines/>";
  52.     excelFile += "</x:WorksheetOptions>";
  53.     excelFile += "</x:ExcelWorksheet>";
  54.     excelFile += "</x:ExcelWorksheets>";
  55.     excelFile += "</x:ExcelWorkbook>";
  56.     excelFile += "</xml>";
  57.     excelFile += "<![endif]-->";
  58.     excelFile += "</head>";
  59.     excelFile += "<body>";
  60.     excelFile += excel;
  61.     excelFile += "</body>";
  62.     excelFile += "</html>";
  63.     var uri =
  64.       "data:application/vnd.ms-excel;charset=utf-8," +
  65.       encodeURIComponent(excelFile);
  66.     var link = document.createElement("a");
  67.     link.href = uri;
  68.     link.style = "visibility:hidden";
  69.     link.download = FileName + ".xls";
  70.     document.body.appendChild(link);
  71.     link.click();
  72.     document.body.removeChild(link);
  73. }

 

版权声明：本文为xiejn原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/xiejn/p/14298663.html