纯前端导出Excel表格
<html>
<head>
<p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件</p>
<button onclick='tableToExcel()'>导出</button>
</head>
<body>
<script> function tableToExcel(){
//要导出的json数据
var 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 = `姓名,电话,邮箱\n`;
//增加\t为了不让表格显示科学计数法或者其他格式
for(let i = 0 ; i < jsonData.length ; i++ ){
for(let item in jsonData[i]){
str+=`${jsonData[i][item] + '\t'},`;
}
str+='\n';
}
//encodeURIComponent解决中文乱码
let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
//通过创建a标签实现
var link = document.createElement("a");
link.href = uri;
//对下载的文件命名
link.download = "json数据表.csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} </script>
</body>
</html>
纯前端导出Excel表格的更多相关文章
- vue 纯前端导出 excel 表格
在开发后台管理系统的时候,很多地方都要用到导出excel 表格,比如将table中的数据导出到本地,那么实现这种需求往往有两种方案: 一.后端开发一个下载链接,前端将这个链接放到 a 标签的 href ...
- H5纯前端生成Excel表格
H5纯前端生成Excel表格方法如下: <!DOCTYPE html> <html> <head> <title></title> < ...
- 前端导出excel表格
前言近期项目有个新需求--将折线图表的数据加一个下载成excel表格的功能.以前下载功能都是调后台接口的,但是这个迭代,后台压力比较重,部分就交给了前端自己实现,下面就记录一下前端如何实现excel表 ...
- 使用javascript纯前端导出excel
前言(感谢技术的分享者) 参考博客地址 github地址 由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls.xlsx ...
- 基于纯前端类Excel表格控件实现在线损益表应用
财务报表也称对外会计报表,是会计主体对外提供的反映企业或预算单位一定时期资金.利润状况的会计报表,由资产负债表.损益表.现金流量表或财务状况变动表.附表和附注构成.财务报表是财务报告的主要部分,不包括 ...
- js前端导出Excel表格后数字自动变成科学计数法问题
一般的文件导出都是后端进行导出,最近一个项目遇到导出接口挂掉了,前端实现导出的情况. 背景是vue框架,iView组件.可以直接使用exportCsv方法进行导出. 导出时进行一下行和列的切割就可以了 ...
- 一篇带你了解如何使用纯前端类Excel表格构建现金流量表
现金流量表(Cash Flow Statement),是指反映企业在一定会计期间现金和现金等价物流入和流出的报表.现金流量表是企业财务报表的三个基本报告之一(另外两个是资产负债表和损益表). 为了全面 ...
- vue实现前端导出excel表格
1.在src目录下创建一个文件(vendor)进入Blob.js和Export2Excel.js 2.npm install -S file-saver 用来生成文件的web应用程序 3.npm in ...
- 原生JavaScript 导出excel表格(兼容ie和其他主流浏览器)
因同事的需求是想前端导出excel表格,网上找了一些demo,自己修改了一下,可能以后会用到,记录下来吧,兼容ie和一些主流浏览器,ie可能会报错,原因参考 这里,edge 浏览器还没有办法导出,正在 ...
随机推荐
- Android性能专项分类
性能专项分类:1.资源消耗2.启动耗时3.主要页面加载时间4.内存泄漏.抖动5.卡顿.页面渲染 一.资源消耗:CPU.内存.流量.功耗-----1.查看CPU占用率:adb shell dumpsys ...
- Design HashMap
Design a HashMap without using any built-in hash table libraries. To be specific, your design should ...
- MQTT安全篇
物联网的核心是连接万物,通过交换并分析数据使得生活更舒适与便捷.不过,敏感数据泄露或者设备被非法控制可不是闹着玩的.比如前段时间国内某著名家电企业的智能洗衣机,使用了某著名电商基于XMPP协议的物联网 ...
- PAT B1031 查验身份证(15)
AC代码 #include <cstdio> #include <iostream> using namespace std; const int max_n = 110; / ...
- 可取消可报告进度的Task
using System; using System.Threading; using System.Threading.Tasks; using System.Windows; namespace ...
- 欧拉函数小结 hdu2588+
从费马小定理到欧拉定理 欧拉公式 再到欧拉函数.,. 小结一下欧拉函数吧 对正整数n,欧拉函数是小于n的正整数中与n互质的数的数目(φ(1)=1)----定义 欧拉函数的基本公式其中pi为x的素因子 ...
- 【原创】大叔问题定位分享(33)oozie提交任务报错ArithmeticException: / by zero
oozie提交workflow后执行task报错: 2019-07-04 17:19:00,559 ERROR [RMCommunicator Allocator] org.apache.hadoop ...
- SQL的GROUP BY 与 Order By
1.概述 “Group By”从字面意义上理解就是根据“By”指定的规则对数据进行分组,所谓的分组就是将一个“数据集”划分成若干个“小区域”,然后针对若干个“小区域”进行数据处理. 2.原始表 3.简 ...
- Facebook 一个热搜帖,美国一个老人癌症不治最后的心愿是跟儿子喝啤酒。
今天早上起床看到这个Facebook上的热搜帖.太感动了.这个老人癌症不治后最后心愿是跟他的儿子们一起喝一次啤酒.这个帖子被他孙子贴上网以后牵动了千万人的心.
- LeetCode 腾讯精选50题--最小栈
题目很简单,实现一个最小栈,能够以线形的时间获取栈中元素的最小值 自己的思路如下: 利用数组,以及两个变量, last用于记录栈顶元素的位置,min用于记录栈中元素的最小值: 每一次push,都比较m ...