方法一：

将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. shell 边边角角

    [Shell学习笔记] 数组.关联数组和别名使用 Linux中bash脚本数组和字典使用举例 Linux Shell 通配符.元字符.转义符使用实例介绍

  2. (转)centos7安装telnet服务

    借鉴:https://www.cnblogs.com/daipenglin/p/4934572.html 阅读目录 1 CentOS7.0 telnet-server 启动的问题 场景:在进行Teln ...

  3. 使用vscode快速建立vue模板

    当我们希望每次新建.vue文件后,vscode能够根据配置,自动生成我们想要的内容. 打开vscode编辑器,依次选择“文件 -> 首选项 -> 用户代码片段”,此时,会弹出一个搜索框,我 ...

  4. Spring学习随笔(1)：为什么要使用Spring

    寒冷的冬天,一周两节课,掏出买了一年没翻过的<Spring实战>. 刚刚接触spring的我对它还不是很熟悉,对各种知识的认知也比较浅薄,但我会学习的过程通过随笔记录下来,监督自己学下去. ...

  5. javaSE集合---进度2

    一.集合框架 1.特点 对象封装数据,对象多了也需要存储,集合用于存储对象. 对象的个数确定可以使用数组,但是不确定的话,可以用集合,因为集合是可变长度的. 2.集合和数组的区别 数组是固定长度的,集 ...

  6. 【spring源码分析】IOC容器初始化——查漏补缺（五）

    前言:我们知道在Spring中经常使用配置文件的形式对进行属性的赋值,那配置文件的值是怎么赋值到属性上的呢,本文将对其进行分析. 首先了解一个类:PropertySourcesPlaceholderC ...

  7. mysql存储引擎介绍，索引

    区别: MyISAM类型不支持事务处理等高级处理,而InnoDB类型支持.MyISAM类型的表强调的是性能,其执行数度比InnoDB类型更快,但是不提供事务支持,而InnoDB提供事务支持已经外部键等 ...

  8. CVE-2019-11477：Linux 内核中TCP协议栈整数溢出漏洞详细分析 代码卫士 今天

    CVE-2019-11477:Linux 内核中TCP协议栈整数溢出漏洞详细分析 代码卫士 今天

  9. Hortonworks，快速上手 Hadoop 的套件

    最近我在思考的一件事情:如何帮助团队 SQL 开发快速掌握大数据相关技术呢?面对疯狂暴涨的数据,SQL Server 存储成本越来越高了,日志的增长量也极大超过预期,隔三差五总有空间不足导致的应用异常 ...

  10. 【JavaScript】使用定时器实现Js的延期执行或重复执行setTimeout,setInterval

    使用定时器实现JavaScript的延期执行或重复执行 window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval.其中前者可 ...