js 实现纯前端将数据导出excel两种方式，亲测有效
由于项目需要，需要在不调用后台接口的情况下，将json数据导出到excel表格，兼容chrome没问题，其他还没有测试过
通过将json遍历进行字符串拼接，将字符串输出到csv文件，输出的文件不会再是html类型的文件而是真正的csv文件，代码如下
<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>
参考了很多大佬的博客其中这两篇对我启发最大，感谢！
https://blog.csdn.net/oscar999/article/details/16342699
https://blog.csdn.net/aa122273328/article/details/50388673
https://blog.csdn.net/hhzzcc_/article/details/80419396
js 实现纯前端将数据导出excel两种方式，亲测有效的更多相关文章
- js 实现纯前端将数据导出excel
通过将json遍历进行字符串拼接,将字符串输出到csv文件,输出的文件不会再是html类型的文件而是真正的csv文件,代码如下 <html> <head> <p styl ...
- 纯前端实现数据导出excel文件
一 安装依赖 npm install -S file-saver xlsx npm install -D script-loader 二 新建文件夹 在网上百度引入即可 三 在main.js中引入 ...
- 数据存储的两种方式：Cookie 和Web Storage
数据存储的两种方式:Cookie 和Web Storage 1.Cookie Cookie的作用就像你去超市购物时,第一次给你办张购物卡,这个购物卡里存放了一些你的个人信息,下次你再来这个连锁超市时, ...
- 数据存储的两种方式：Cookie 和Web Storage（转）
数据存储的两种方式:Cookie 和Web Storage 数据存储的两种方式:Cookie 和Web Storage 1.Cookie Cookie的作用就像你去超市购物时,第一次给你办张购物卡 ...
- Redis数据持久化的两种方式RDB和AOF
由于Redis的数据都存放在内存中,如果没有配置持久化,redis重启后数据就全丢失了,于是需要开启redis的持久化功能,将数据保存到磁 盘上,当redis重启后,可以从磁盘中恢复数据.redis提 ...
- 大数据学习day33----spark13-----1.两种方式管理偏移量并将偏移量写入redis 2. MySQL事务的测试 3.利用MySQL事务实现数据统计的ExactlyOnce（sql语句中出现相同key时如何进行累加（此处时出现相同的单词））4 将数据写入kafka
1.两种方式管理偏移量并将偏移量写入redis (1)第一种:rdd的形式 一般是使用这种直连的方式,但其缺点是没法调用一些更加高级的api,如窗口操作.如果想更加精确的控制偏移量,就使用这种方式 代 ...
- 如何使用JavaScript实现纯前端读取和导出excel文件
js-xlsx 介绍 由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls.xlsx.ods(一种OpenOffice专 ...
- 如何使用JavaScript实现纯前端读取和导出excel文件（转）
转自小茗同学博客:https://www.cnblogs.com/liuxianan/p/js-excel.html js-xlsx 介绍 由SheetJS出品的js-xlsx是一款非常方便的只需要纯 ...
- 前端表格数据导出excel
使用tableExport.js导出bootstrap-table表格成excel并且支持中文 1. 下载tableExport.js https://github.com/hhurz/tableEx ...
随机推荐
- spring cloud微服务三：Eureka服务治理之注册服务提供者及服务的发现和消费
当服务注册中心成功建立以后,就需要有服务的注册和消费,否则这个服务注册中心就没有了存在的意义,而实际上,一个简单的服务注册也是非常简单的,仅仅需要实现四部曲就好. 首先,还是建立一个基本的spring ...
- Maven中如何利用继承创建web项目（分层开发）
1.创建父项目parent 新建——Maven Project——勾选Create a Simple Project(skip archetype selected)——填写parent坐标,注意打包 ...
- 记录在APIO2019前
2019-05-07 嗯, 只报名参加了APIO. 今天是五月七号,距离前往帝都参加我的退役之战, 还有八天(5.15) 然后没什么可说的, 就是记录一下这几天吧. 今天下午去学了虚树(其实没什么的) ...
- MySQL的高可用实现：MySQL系列之十四
MySQL的高可以有三种实现方式:多主模式(Multi Master MySQL),MHA(Master High Availability)和 Galera Cluster:wresp 一.MHA ...
- iOS开发之swift与OC混编出现的坑，oc中不能对swift的代理进行调用，不能访问swift中的代理，swift中的回调方法
1. Swift与oc混编译具体怎么实现,这儿我就不重复讲出了,网上有大把的人讲解. 2. 在swift与OC混编的编译环境下, oc类不能访问swift创建类中的代理? 解决方法如下: 在代理的头部 ...
- iOS获取手机型号、iOS获取当前app的名称和版本号
NSDictionary *infoDictionary = [[NSBundle mainBundle] infoDictionary]; CFShow(infoDictionary); // ap ...
- git 工作中常用命令(结合vscode学习git 命令)
作为一名前端开发,大家在工作中常常使用什么开发工具呢,我觉得我首选的是vscode,他配合git使用起来非常方便. 工作中常用三个命令: git终端常使用: git add . git commit ...
- PHPExcel探索之旅---阶段三 绘制图表
利用PHPExcel插件进行绘制图表 <?php /** * 使用PHPExcel插件在excel文件中利用其中的数据建立折线图 * */ $dir = dirname(__FILE__); r ...
- lintcode-dfs实现二叉树的层序遍历
class Solution { /** * @param root: The root of binary tree. * @return: Level order a list of lists ...
- Selenium WebDriver原理（二）：Selenium是如何操纵浏览器的？
前言 上一篇文章<selenium webdriver 是怎么运行的>用了一个简单的例子--搭出租车,形象地讲解selenium webdriver 是如何运行的,而这一篇文章可以理解为深 ...