方法一:

将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文件下载的更多相关文章

  1. c#将前端传来的Json解析成对象

    描述:因工作中需要将C#中的Json字符串转换为对象,对此记录下. 解决办法: 1.前端传过来的Json字符串,OrderAppModuleJson即前端传递到后端的Json字符串 string st ...

  2. vue 把后台返回的json拼接成excel并下载

    先封装一下生成excel的方法 downfile.js export default { data() { return {} }, components: {}, created() { }, me ...

  3. JSON文件转为Excel

    前言 今天在帮老师做年终党统的时候,发现管理平台上没有将正在发展的同志的信息导出功能,只能一个一个点击进去查看,操作起来步骤很多很麻烦,所以我就想到了"扒"一下这个网页,扒下来发现 ...

  4. Python Json分别存入Mysql、MongoDB数据库,使用Xlwings库转成Excel表格

    将电影数据 data.json 数据通过xlwings库转换成excel表格,存入mysql,mongodb数据库中.python基础语法.xlwings库.mysql库.pymongo库.mongo ...

  5. [Web]flask-excel实现excel文件下载的前后端实现

    之前同事写了前端表格导出的功能, 前后端逻辑没有梳理, 导致后端代码十分臃肿. 接手之后, 重新选择了前端table插件, 从jqxGrid变更为bootstrapTable. 本来想依赖集成的tab ...

  6. 正确的前端传后台json方式

    DEMO: var data=JSON.stringify({"page": {"pagenow": 1,"pagesize": 20},& ...

  7. SpringMVC 前端获得定义JSON对象的方法

    SpringMVC 前端获得定义JSON对象的方法: 可以使用map进行对象的创建,这样就会解析成键值对,不需要为前端专门定义对象.

  8. Json文件转Excel

    先创建一个web项目,在根目录放置需要转换的json文件,直接读取静态Json文件加载数据进行转换,代码如下: string Json = string.Empty; List<object&g ...

  9. Json字符串转excel表格文件

    假如我们有一段json串,该json串是由一系列结构相同的数据集合组成,如下: { "data": [ { "groupId": "com.test. ...

随机推荐

  1. pc页面自动缩放到手机端

    今天做了个pc的页面,看了别人的网站在手机端能把pc端的网页刚好缩放到手机端,看着很舒服. 于是想把自己的页面也这样搞一下,刚开始,想到的是利用css3的缩放来做,想的是当屏幕尺寸改变时缩放整个页面, ...

  2. PowerShell中汉字与ASCII码相互转换

    function asc($param) { $rtn = '' $list = $param -split '' foreach ($char in $list) { if($char -ne '' ...

  3. 前端武器库之DOM练习

    1.模态对话框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. 提高python运行效率的方法

    让关键代码依赖于外部包:你可以为紧急的任务使用C.C++或机器语言编写的外部包,这样可以提高应用程序的性能 使用生成器,因为可以节约大量内存 多个if elif条件判断,可以把最有可能先发生的条件放到 ...

  5. sftp远程传输脚本

    该脚本主要是是批量修改文件名,然后传输文件到服务器#!/bin/bash #脚本名:sftp.sh while true do num=`cat test.txt|wc -l` ;a<=$num ...

  6. redisson spring boot starter 做分布式锁

    使用redisson做分布式锁 分布式锁 在java中单体应用中,我们如果想要保证一个接口或者服务.方法当下只有一个线程在运行,我们可以通过JDK提供的Lock.Semaphore.同步锁等多种方式实 ...

  7. ubuntu系统调整时区和时间

    date: 2019-05-30  10:14:23 author:headsen  chen 个人原创博客,转录需要注明作者和出处. 1,安装ntpdate,同步标准时间 root@hk-confl ...

  8. word 2010中设置默认粘贴为 只保留文本粘贴【visio也适用于快捷键方式】

    VISIO也适用如下方式: 3. 当然也可以直接是 Ctrl + Alt + V打开选择性粘贴选项卡 来选择其中某项来粘贴也是可以的 转: word 2010中设置默认粘贴为 只保留文本粘贴 2012 ...

  9. 阶段5 3.微服务项目【学成在线】_day18 用户授权_02-方法授权-需求分析

    2 方法授权 2.1需求分析 方法授权要完成的是资源服务根据jwt令牌完成对方法的授权,具体流程如下: 1.生成Jwt令牌时在令牌中写入用户所拥有的权限 我们给每个权限起个名字,例如某个用户拥有如下权 ...

  10. CentOS 端口和防火墙操作

    Centos 7 端口和防火墙命令: 查看已经开放的端口:firewall-cmd --list-ports 开启端口:firewall-cmd --zone=public --add-port=80 ...