原生javaScript导出表格数据
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<button onclick="exportData(header,jsonData,'solid','csv')">导出csv</button>
<button onclick="exportData(header,[],'下载模板','csv')">下载模板</button>
</body>
</html>
<script type="text/javascript">
//表头
var header = [
{
key: 'name',
value: '姓名'
},
{
key: 'email',
value: '邮箱'
},
{
key: 'age',
value: '年龄'
},
{
key: 'phone',
value: '手机号'
},
{
key: 'address',
value: '地址'
}
]
//表格数据
var 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'
}
]
function exportData(header, jsonData, fileName,extension){
//列标题，用逗号隔开，每一个逗号就是隔开一个单元格
let str = '';
var keys = [];
for(i = 0; i<header.length; i++){
str+=`${header[i].value}\t,`;
keys.push(header[i].key);
}
str +=`\n`
for(let i = 0; i<jsonData.length; i++){
for(let j = 0; j < keys.length; j++){
console.log(jsonData[i],keys[j])
str+=`${jsonData[i][keys[j]] || ''}\t,`
}
str+=`\n`
}
let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
download(uri,fileName,extension);
} function download(url,fileName,extension){
var oA = document.createElement('a');
oA.href = url;
oA.download = `${fileName}.${extension}`;
document.body.appendChild(oA);
oA.click();
document.body.removeChild(oA);
}
</script>
原生javaScript导出表格数据的更多相关文章
- 导出表格数据到excel并下载(HSSFWorkbook版)
这里主要前面是通过一个全局变量,在layui的done回调里拿到数据,然后将该数据导出到excel,这里要注意一点,下载excel不能用ajax方式,如果采用ajax下载默认会读取response返回 ...
- 原生JavaScript 导出excel表格（兼容ie和其他主流浏览器）
因同事的需求是想前端导出excel表格,网上找了一些demo,自己修改了一下,可能以后会用到,记录下来吧,兼容ie和一些主流浏览器,ie可能会报错,原因参考 这里,edge 浏览器还没有办法导出,正在 ...
- 重构一段基于原生JavaScript的表格绘制代码
为了在CardSimulate项目中方便的显示技能和效果列表,决定重构以前编写的一段JavaScript代码——att表格绘制库,这段代码的作用是将特定的JavaScript数据对象转化为表格,支持精 ...
- js导出表格数据
考虑到浏览器兼容性问题,采用原生js和后台交互下载网页数据 js: var table = $('.table-panel table'); // Header var tdData ="& ...
- ajax导出表格数据失败的几处坑
$.ajax({ type:'POST', async:false, url:'/export', data:params, dataType:'json', ... success:function ...
- layui 导出表格数据
第一种方法没试过,有机会要试试.
- Java操作Jxl实现导出数据生成Excel表格数据文件
实现:前台用的框架是Easyui+Bootstrap结合使用,需要引入相应的Js.Css文件.页面:Jsp.拦截请求:Servlet.逻辑处理:ClassBean.数据库:SQLserver. 注意: ...
- vue原生表格怎样实现动态列及表格数据下载
最近项目经常用到带有合并效果以及动态列的表格,而翻阅iview和element-ui官网没有找到合适的(也有可能自己的水平有限,不会改写),所以只好自己用原生表格写了一个,具体效果如下: 这个表格右侧 ...
- 百度地图里面搜索到的公司商家电话导出表格？怎样将把百度地图里面搜索到的公司 电话 地址 等数据导出excel里？
好多人在问:如何将百度地图里面搜索到的公司商家电话导出表格?怎样将把百度地图里面搜索到的公司 电话 地址 等数据导出excel里? 现在,很多人都在网络上找商家,联系业务. 百度地图里有很多的商家联系 ...
随机推荐
- 朴素贝叶斯算法java实现（多项式模型）
网上有很多对朴素贝叶斯算法的说明的文章,在对算法实现前,参考了一下几篇文章: NLP系列(2)_用朴素贝叶斯进行文本分类(上) NLP系列(3)_用朴素贝叶斯进行文本分类(下) 带你搞懂朴素贝叶斯分类 ...
- 大型Java进阶专题(十一) 深入理解JVM (下)
前言 前面我们了解了JVM相关的理论知识,这章节主要从实战方面,去解读JVM. 类加载机制 Java源代码经过编译器编译成字节码之后,最终都需要加载到虚拟机之后才能运行.虚拟机把描述类的数据从 ...
- C#LeetCode刷题之#876-链表的中间结点（Middle of the Linked List）
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3836 访问. 给定一个带有头结点 head 的非空单链表,返回链 ...
- 生成对抗网络GAN介绍
GAN原理 生成对抗网络GAN由生成器和判别器两部分组成: 判别器是常规的神经网络分类器,一半时间判别器接收来自训练数据中的真实图像,另一半时间收到来自生成器中的虚假图像.训练判别器使得对于真实图像, ...
- 利用遗传算法求解TSP问题
转载地址 https://blog.csdn.net/greedystar/article/details/80343841 目录 一.问题描述 二.算法描述 三.求解说明 四.参考资料 五.源代码 ...
- Vulnhub篇Photographerr
0x00 靶机信息 靶机:Photographerr:1 难度:中 下载:https://www.vulnhub.com/entry/photographer-1,519/ 0x01 信息收集 靶场网 ...
- python基本数据类型（二）
列表 list 1.list.append( p_object) ---- 增加列表参数(向后追加) list=['lifei','liuhua','laochai'] list.append( ...
- idea生成SpringBoot项目后再次调出依赖
插眼 https://www.cnblogs.com/cosmos-wong/p/12908580.html
- MyISAM 和InnoDB的区别
InnoDB和MyISAM是许多人在使用MySQL时最常用的两个表类型,这两个表类型各有优劣,视具体应用而定.基本的差别为:MyISAM类型不支持事务处理等高级处理,而InnoDB类型支持.MyISA ...
- oracle replace的用法
表数据里面有些数据是有换行或者特殊字符的,想要去掉,但是几千条记录要一条条改基本不可能. 后来想到了replace这个函数,具体用法如下: update 表1 t set t.列1=replace(( ...