方法一：

将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. Python Tinker学习笔记

    一直在简单看看python,这次项目需要做个界面,最好是要跨平台的,之前考虑QT,但是树莓派上QT跨平台编译一直装这有问题,后来发现Python不就可以么? 于是决定用python做个界面,但是做界面 ...

  2. java1.8新特性之stream流式算法

    在Java1.8之前还没有stream流式算法的时候,我们要是在一个放有多个User对象的list集合中,将每个User对象的主键ID取出,组合成一个新的集合,首先想到的肯定是遍历,如下: List& ...

  3. 通过时间戳批量删除hbase的数据

    如何通过时间戳批量删除hbase的数据 我们使用hive关联hbase插入数据时,有时会写错数据,此时hbase中的数据量已经很大很大了(上亿).此时,我们要修改错误的数据,只需要删除写错的那部分数据 ...

  4. Pytest从测试类外为测试用例动态注入数据

    今天Nelly问我Pytest能不能支持从TestClass类外传入参数?从类外批量传入各个test方法需要的参数.因为数据文件可能有很多情况,不方便依次匹配. 然而又必须用类对用例进行归类及复用,数 ...

  5. 手写实现RPC框架（不带注册中心和带注册中心两种）

    实现自己的RPC框架如果不需要自定义协议的话那就要基于Socket+序列化. ProcessorHandler:主要是用来处理客户端的请求. package dgb.nospring.myrpc; i ...

  6. [Andorid] 通过JNI实现kernel与app进行spi通讯

    CPU:RK3399 系统:Android 7.1 人脸识别的要求越来越高,因此主板增加了 SE 加密芯片,加密芯片通过 spi 接口与 CPU 通讯. 对于 kernel 层的代码,Linux 原始 ...

  7. java打jar包与找不到依赖包详解

    eclipse打jar包与找不到依赖包详解 eclipse打工具jar 1.项目右键-->export -->搜索java 2.选择JAR file 3.打包 eclipse打包可执行ja ...

  8. 转录调控 | Transcriptional Regulation | Regulon

    scRNA-seq做完该做的QC.normalization.imputation.clustering.trajectory和integration,就会开始做转录调控的分析了. 核心就是围绕着TF ...

  9. GCC编译流程及常用编辑命令

    GCC 编译器在编译一个C语言程序时需要经过以下 4 步: 将C语言源程序预处理,生成.i文件. 预处理后的.i文件编译成为汇编语言,生成.s文件. 将汇编语言文件经过汇编,生成目标文件.o文件. 将 ...

  10. pgpool 的配置文件详解

    listen_addresses = 'localhost' # Host name or IP address to listen on: # '*' for all, '' for no TCP/ ...