方法一：

将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. 使用u盘安装linux(manjaro)时Grub报错

    本文通过MetaWeblog自动发布,原文及更新链接:https://extendswind.top/posts/technical/manjaro_install_problem_grub 错误 e ...

  2. 函数第一部分：经典的永远是简单的-Python基础前传（10）

    (一)前言 对于零基础学习Python的朋友,或者转行做数据分析的朋友,跟jacky交流最多的问题就是Python网络爬虫学习问题,比如说要爬取美团,或者说爬取携程等等,在爬取的过程中,这些朋友总是会 ...

  3. zabbix（7）邮件报警配置

    邮件报警可以使用Linux自带邮件服务器(postfix等),也可以使用其他邮件服务器(像腾讯邮箱,126邮箱) 一.使用mail. 1.确定zabbix server是否安装发送邮件的命令mail, ...

  4. Js 之生成二维码插件（jquery.qrcode.js）

    一.下载 链接:https://pan.baidu.com/s/1cMjaCYQ_buZNT5XRRjuNTA提取码:myqm 二.效果图 三.代码 <!DOCTYPE html> < ...

  5. 2019-06-03 校内python模拟题解（所有非原题）

    一起来女装吧 本题改编自USACO(USA Computing Olympiad) 1.1节的第一题 (感谢lsy同学对本题题面的贡献) 直接计算就好了 chr:将ASCII码转成字符 ord:字符对 ...

  6. HTTP的POST提交的四种常见消息主体格式

    HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PUT.DELETE.TRACE.CONNECT 这几种.其中 POST 一般用来向服务端提交数据,本文 ...

  7. nrm切换npm包源

    nrm可以随时切换npm包的源 npm install -g nrm 安装nrm完成 查看nrm源 nrm ls 切换源 npm use npm #也可以切换成其他源 

  8. Postgresql使用coalesce实现类似oracle的NVL方法

    COALESCE (expression_1, expression_2, ...,expression_n)依次参考各参数表达式,遇到非null值即停止并返回该值. 如果所有的表达式都是空值,最终将 ...

  9. What are the benefits to using anonymous functions instead of named functions for callbacks and parameters in JavaScript event code?

     What are the benefits to using anonymous functions instead of named functions for callbacks and par ...

  10. 软阈值迭代算法（ISTA）和快速软阈值迭代算法（FISTA）

    缺月挂疏桐,漏断人初静. 谁见幽人独往来,缥缈孤鸿影. 惊起却回头,有恨无人省. 拣尽寒枝不肯栖,寂寞沙洲冷.---- 苏轼 更多精彩内容请关注微信公众号 "优化与算法" ISTA ...