这篇文章主要介绍了javascript怎么实现纯前端将数据导出excel的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇javascript怎么实现纯前端将数据导出excel文章都会有所收获，下面我们一起来看看吧
这篇文章主要介绍了javascript怎么实现纯前端将数据导出excel的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇javascript怎么实现纯前端将数据导出excel文章都会有所收获，下面我们一起来看看吧。
将table标签，包括tr、td等对JSON数据进行拼接，将table输出到表格上实现，这种方法的弊端在于输出的是伪excel，虽说生成xls为后缀的文件，但文件形式上还是html，
代码如下：
<html><head> <p >使用table标签方式将json导出xls文件</p> <button onclick='tableToExcel()'>导出</button></head><body> <script> const tableToExcel = () => { // 要导出的json数据 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' }, ] // 列标题 let str = '<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>'; // 循环遍历，每行加入tr标签，每个单元格加td标签 for(let i = 0 ; i < jsonData.length ; i++ ){ str+='<tr>'; for(const key in jsonData[i]){ // 增加为了不让表格显示科学计数法或者其他格式 str+=`<td>${ jsonData[i][key] + ''}</td>`; } str+='</tr>'; } // Worksheet名 const worksheet = 'Sheet1' const uri = 'data:application/vnd.ms-excel;base64,'; // 下载的表格模板数据 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>导出的文件后缀是xls，用office打开的时候不太友好。
然后，我发现了第二个方法
通过将json遍历进行字符串拼接，将字符串输出到csv文件，代码如下：
<html><head> <p >使用a标签方式将json导出csv文件</p> <button onclick='tableToExcel()'>导出</button></head><body> <script> const tableToExcel = () => { // 要导出的json数据 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' }, ]; // 列标题，逗号隔开，每一个逗号就是隔开一个单元格 let str = `姓名,电话,邮箱`; // 增加为了不让表格显示科学计数法或者其他格式 for(let i = 0 ; i < jsonData.length ; i++ ){ for(const key in jsonData[i]){ str+=`${jsonData[i][key] + ''},`; } str+=''; } // encodeURIComponent解决中文乱码 const uri = 'data:text/csv;charset=utf-8,ufeff' + encodeURIComponent(str); // 通过创建a标签实现 const link = document.createElement("a"); link.href = uri; // 对下载的文件命名 link.download = "json数据表.csv"; link.click(); } </script></body></html>关于“javascript怎么实现纯前端将数据导出excel”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“javascript怎么实现纯前端将数据导出excel”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。
--结束END--
本文标题: javascript怎么实现纯前端将数据导出excel
本文链接: https://www.lsjlt.com/news/343510.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-13
2024-05-13
2024-05-13
2024-05-13
2024-05-13
2024-05-13
2024-05-13
2024-05-13
2024-05-13
2024-05-13
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0