javascript实现纯前端将数据导出excel两种方式

来源: https://www.ucloud.cn/yun/127741.html 作者: 3403771864 发布日期: 发布于2022-09-15 22:30

javascript实现纯前端将数据导出excel是有两种方式，现在就为大家介绍：

　　方法一

　　将table标签，包括tr、td等对json数据进行拼接，直接在table的表格上体现出，但此方法的弊端在于输出的是伪excel，即使是生成xls为后缀的文件，可文件形式上还是html，

代码如下：

　　<html>
　　<head>
　　<pstyle="font-size:20px;color:red;">使用table标签方式将json导出xls文件</p>
　　<buttononclick='tableToExcel()'>导出</button>
　　</head>
　　<body>
　　<script>
　　consttableToExcel=()=>{
　　//要导出的json数据
　　constjsonData=[
　　{
　　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'
　　},
　　]
　　//列标题
　　letstr='<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>';
　　//循环遍历，每行加入tr标签，每个单元格加td标签
　　for(leti=0;i<jsonData.length;i++){
　　str+='<tr>';
　　for(constkeyinjsonData[i]){
　　//增加 为了不让表格显示科学计数法或者其他格式
　　str+=`<td>${jsonData[i][key]+' '}</td>`;
　　}
　　str+='</tr>';
　　}
　　//Worksheet名
　　constworksheet='Sheet1'
　　consturi='data:application/vnd.ms-excel;base64,';
　　//下载的表格模板数据
　　consttemplate=`<htmlxmlns:o="urn:schemas-microsoft-com:office:office"
　　xmlns:x="urn:schemas-microsoft-com:office:excel"
　　xmlns="http://www.w3.org/TR/REC-html40">
　　<head><!--[ifgtemso9]><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编码
　　constbase64=s=>window.btoa(unescape(encodeURIComponent(s)));
　　</script>
　　</body>
　　</html>

　　导出的文件后缀是xls，用office打开的时候不太友好。现在就说说第二种方式吧。

　　方法二

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

　　<html>
　　<head>
　　<pstyle="font-size:20px;color:red;">使用a标签方式将json导出csv文件</p>
　　<buttononclick='tableToExcel()'>导出</button>
　　</head>
　　<body>
　　<script>
　　consttableToExcel=()=>{
　　//要导出的json数据
　　constjsonData=[
　　{
　　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'
　　},
　　];
　　//列标题，逗号隔开，每一个逗号就是隔开一个单元格
　　letstr=`姓名,电话,邮箱
　　`;
　　//增加 为了不让表格显示科学计数法或者其他格式
　　for(leti=0;i<jsonData.length;i++){
　　for(constkeyinjsonData[i]){
　　str+=`${jsonData[i][key]+' '},`;
　　}
　　str+='
　　';
　　}
　　//encodeURIComponent解决中文乱码
　　consturi='data:text/csv;charset=utf-8,ufeff'+encodeURIComponent(str);
　　//通过创建a标签实现
　　constlink=document.createElement("a");
　　link.href=uri;
　　//对下载的文件命名
　　link.download="json数据表.csv";
　　link.click();
　　}
　　</script>
　　</body>
　　</html>

　　上边的两段代码复制即可用。

     上述就是javascript实现纯前端将数据导出excel两种方式全部内容，希望大家可以学习带更多。