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

3403771864 发布于2022-09-15 22:30 / 968人阅读

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两种方式全部内容，希望大家可以学习带更多。

GPU云服务器云服务器 js怎样将数据导出excel js将数据导出成excel php实现导出excel java实现excel导出

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/127741.html

使用 SpreadJS 实现 JavaScript 中导入和导出Excel文件

摘要：而作为一款深受用户喜爱的电子表格工具，借助其直观的界面出色的计算性能和图表工具，已经成为数据统计领域不可或缺的软件之一。使用实现的导入和导出通过纯，您完全可以实现导入和导出文件功能，并为最终用户提供与这些文件进行交互的界面。 JavaScript是一个涵盖多种框架、直译式、可以轻松自定义客户端的脚本语言，在 Web 应用程序中，更加易于编码和维护。而Excel 作为一款深受用户喜爱的电...

Jioby 2019-08-23 18:31 评论0 收藏0
纯前端实现excel表格导入导出

摘要：使用时，前端可以将后端返回的数据拼接成自己需要导出的格式，下载到电脑中，完全不依赖后端。前言 github: https://github.com/stardew516... 以往做excel表格下载功能的时候，都是后端生成好表格后，存储在某个地方，然后给前端一个链接，前端使用a标签加download下载，或者使用node。其实纯前端也是可以做表格下载的，有一个很好用的javascr...

CoyPan 2019-08-21 16:19 评论0 收藏0
纯前端开发案例：用 SpreadJS 搭建信息系统软件开发平台

摘要：葡萄城的是一个基于技术的纯控件，控件性能流畅，有类似的在线表格编辑器，适合非专业程序员设计报表模板，很符合平台部分无编码开发的理念。葡萄城控件产品对于项目的价值控件主要用于本项目中的报表设计，展示，打印等功能。 showImg(https://segmentfault.com/img/bVbalYk?w=1000&h=400); 华闽通达 - R 平台应用所使用产品：SpreadJS ...

Heier 2019-08-22 17:08 评论0 收藏0
XCel 项目总结 - Electron 与 Vue 的性能优化

摘要：而这里的单元格信息是唯一的，所以直接通过为一个空对象赋值即可。和相关的知识和技巧高亮的列单元格采用展示。在中，被选中的单元格会高亮相应的行和列，以提醒用户。 showImg(https://segmentfault.com/img/bVGkdk?w=900&h=500); XCEL 是一个 Excel 数据清洗工具，其通过可视化的方式让用户轻松地对 Excel 数据进行筛选。 XCEL...

XUI 2019-08-22 10:45 评论0 收藏0