前端通过将json转成excel文件下载
方法一：
将table标签，包括tr、td等对json数据进行拼接，将table输出到表格上实现，这种方法的弊端在于输出的是伪excel，虽说生成xls为后缀的文件，但文件形式上还是html，代码如下
function tableToExcel(){
//要导出的json数据
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'
},
]
//列标题
var str = '<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>';
//循环遍历，每行加入tr标签，每个单元格加td标签
for(let i = 0 ; i < jsonData.length ; i++ ){
str+='<tr>';
for(let item in jsonData[i]){
//增加\t为了不让表格显示科学计数法或者其他格式
str+=`<td>${ jsonData[i][item] + '\t'}</td>`;
}
str+='</tr>';
}
//Worksheet名
var worksheet = 'Sheet1'
var uri = 'data:application/vnd.ms-excel;base64,';
//下载的表格模板数据
var template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40">
<head><!--[if gte mso 9]><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编码
function base64 (s) { return window.btoa(unescape(encodeURIComponent(s))) }
方法二：
通过将json遍历进行字符串拼接，将字符串输出到csv文件，输出的文件不会再是html类型的文件而是真正的csv文件，代码如下
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);
}
相关链接：
https://blog.csdn.net/oscar999/article/details/16342699
https://blog.csdn.net/aa122273328/article/details/50388673
前端通过将json转成excel文件下载的更多相关文章
- c#将前端传来的Json解析成对象
描述:因工作中需要将C#中的Json字符串转换为对象,对此记录下. 解决办法: 1.前端传过来的Json字符串,OrderAppModuleJson即前端传递到后端的Json字符串 string st ...
- vue 把后台返回的json拼接成excel并下载
先封装一下生成excel的方法 downfile.js export default { data() { return {} }, components: {}, created() { }, me ...
- JSON文件转为Excel
前言 今天在帮老师做年终党统的时候,发现管理平台上没有将正在发展的同志的信息导出功能,只能一个一个点击进去查看,操作起来步骤很多很麻烦,所以我就想到了"扒"一下这个网页,扒下来发现 ...
- Python Json分别存入Mysql、MongoDB数据库，使用Xlwings库转成Excel表格
将电影数据 data.json 数据通过xlwings库转换成excel表格,存入mysql,mongodb数据库中.python基础语法.xlwings库.mysql库.pymongo库.mongo ...
- [Web]flask-excel实现excel文件下载的前后端实现
之前同事写了前端表格导出的功能, 前后端逻辑没有梳理, 导致后端代码十分臃肿. 接手之后, 重新选择了前端table插件, 从jqxGrid变更为bootstrapTable. 本来想依赖集成的tab ...
- 正确的前端传后台json方式
DEMO: var data=JSON.stringify({"page": {"pagenow": 1,"pagesize": 20},& ...
- SpringMVC 前端获得定义JSON对象的方法
SpringMVC 前端获得定义JSON对象的方法: 可以使用map进行对象的创建,这样就会解析成键值对,不需要为前端专门定义对象.
- Json文件转Excel
先创建一个web项目,在根目录放置需要转换的json文件,直接读取静态Json文件加载数据进行转换,代码如下: string Json = string.Empty; List<object&g ...
- Json字符串转excel表格文件
假如我们有一段json串,该json串是由一系列结构相同的数据集合组成,如下: { "data": [ { "groupId": "com.test. ...
随机推荐
- 前端代码规范-Javascript
命名规范 ECMAScript 规范中标识符采用驼峰大小写格式,驼峰命名法由小(大)写字母开始,后续每个单词首字母都大写.根据首字母是否大写,分为两种方式: Pascal Case 大驼峰式命名法:首 ...
- 【hadoop环境问题】namenode无法启动问题解决
[问题背景] 要在自己的阿里云上搭伪分布式,用来复习和强化hive相关的知识,在执行脚本 sh start-dfs.sh后,jps后: 然后查看name的日志,报错如下: [解决方法] 网上的很多方法 ...
- Go by Example-图解数组
基本概念 1.数组是具有相同唯一类型的一组已编号且长度固定的数据项序列,这种类型可以是任意的原始类型例如整形.字符串或者自定义类型. 2.在 Go 中因为数组的内存布局是连续的,所以可以通过索引(位置 ...
- 认识wsgi
WSGI是什么? WSGI,全称 Web Server Gateway Interface,或者 Python Web Server Gateway Interface ,是为 Python 语言定义 ...
- Vue源码分析(二) : Vue实例挂载
Vue源码分析(二) : Vue实例挂载 author: @TiffanysBear 实例挂载主要是 $mount 方法的实现,在 src/platforms/web/entry-runtime-wi ...
- 研途APP——项目需求分析
研途APP--项目需求分析 1.作业描述 项目 内容 课程 软件工程实践 作业链接 团队作业第二次-需求规格说明书 团队名称 8rookies 作业目标 作业正文 研途APP--项目需求分析 其他参考 ...
- libmidas.so.2
libmidas.so.2 libmidas.so.2文件,使DATASNAP FOR LINUX中间件,支持OleVariant格式的序列,使TDataSetProvider+TClientData ...
- 【Python】把文件名命名成canlendar.py竟然导致无法使用canlendar模块 附赠2020年月历
这个bug困扰了我一阵,直到在 http://www.codingke.com/question/15489 找到了解决问题的钥匙,真是没想到居然是这个原因导致的. 下面是出错信息,可以看到只要目录下 ...
- 批量转换Excel转CSV文件
本文为Excel VBA代码,可以实现将某一文件夹内的Excel文件(xls或者xlsx)另存为“逗号分隔的csv文件”. 使用条件: 1. Windows系统: 2. 已安装 MS 2007或以 ...
- xshell6破解4窗口限制
资源路径: 链接: https://pan.baidu.com/s/11zumNoaIN1AF_YhmiPGWdA 提取码: nfs9 破解方法 先卸载系统中已经安装的xshell与xftp 然后安装 ...