<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Document</title>

</head>

<body>

    <button onclick="exportData(header,jsonData,'solid','csv')">导出csv</button>

    <button onclick="exportData(header,[],'下载模板','csv')">下载模板</button>

</body>

</html>

<script type="text/javascript">

    //表头

    var header = [

        {

            key: 'name',

            value: '姓名'

        },

        {

            key: 'email',

            value: '邮箱'

        },

        {

            key: 'age',

            value: '年龄'

        },

        {

            key: 'phone',

            value: '手机号'

        },

        {

            key: 'address',

            value: '地址'

        }

    ]

    //表格数据

    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'

        }

    ]

    function exportData(header, jsonData, fileName,extension){

        //列标题，用逗号隔开，每一个逗号就是隔开一个单元格

        let str = '';

        var keys = [];

        for(i = 0; i<header.length; i++){

            str+=`${header[i].value}\t,`;

            keys.push(header[i].key);

        }

        str +=`\n`

        for(let i = 0; i<jsonData.length; i++){

            for(let j = 0; j < keys.length; j++){

                console.log(jsonData[i],keys[j])

                str+=`${jsonData[i][keys[j]] || ''}\t,`

            }

            str+=`\n`

        }

        let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);

        download(uri,fileName,extension);

    }

    function download(url,fileName,extension){

        var oA = document.createElement('a');

        oA.href = url;

        oA.download = `${fileName}.${extension}`;

        document.body.appendChild(oA);

        oA.click();

        document.body.removeChild(oA);

    }

</script>

原生javaScript导出表格数据的更多相关文章

  1. 导出表格数据到excel并下载(HSSFWorkbook版)

    这里主要前面是通过一个全局变量,在layui的done回调里拿到数据,然后将该数据导出到excel,这里要注意一点,下载excel不能用ajax方式,如果采用ajax下载默认会读取response返回 ...

  2. 原生JavaScript 导出excel表格（兼容ie和其他主流浏览器）

    因同事的需求是想前端导出excel表格,网上找了一些demo,自己修改了一下,可能以后会用到,记录下来吧,兼容ie和一些主流浏览器,ie可能会报错,原因参考 这里,edge 浏览器还没有办法导出,正在 ...

  3. 重构一段基于原生JavaScript的表格绘制代码

    为了在CardSimulate项目中方便的显示技能和效果列表,决定重构以前编写的一段JavaScript代码——att表格绘制库,这段代码的作用是将特定的JavaScript数据对象转化为表格,支持精 ...

  4. js导出表格数据

    考虑到浏览器兼容性问题,采用原生js和后台交互下载网页数据 js: var table = $('.table-panel table'); // Header var tdData ="& ...

  5. ajax导出表格数据失败的几处坑

    $.ajax({ type:'POST', async:false, url:'/export', data:params, dataType:'json', ... success:function ...

  6. layui 导出表格数据

    第一种方法没试过,有机会要试试.

  7. Java操作Jxl实现导出数据生成Excel表格数据文件

    实现:前台用的框架是Easyui+Bootstrap结合使用,需要引入相应的Js.Css文件.页面:Jsp.拦截请求:Servlet.逻辑处理:ClassBean.数据库:SQLserver. 注意: ...

  8. vue原生表格怎样实现动态列及表格数据下载

    最近项目经常用到带有合并效果以及动态列的表格,而翻阅iview和element-ui官网没有找到合适的(也有可能自己的水平有限,不会改写),所以只好自己用原生表格写了一个,具体效果如下: 这个表格右侧 ...

  9. 百度地图里面搜索到的公司商家电话导出表格？怎样将把百度地图里面搜索到的公司 电话 地址 等数据导出excel里？

    好多人在问:如何将百度地图里面搜索到的公司商家电话导出表格?怎样将把百度地图里面搜索到的公司 电话 地址 等数据导出excel里? 现在,很多人都在网络上找商家,联系业务. 百度地图里有很多的商家联系 ...

随机推荐

  1. 用Python玩连连看是什么效果？

    1.前言 Python实现的qq连连看辅助, 仅用于学习, 请在练习模式下使用, 请不要拿去伤害玩家们... 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道 ...

  2. LinuX操作系统基础------>了解文件结构和相关的文件操作

    了解LinuX文件系统 熟悉LinuX的文件结构 熟悉LinuX的基本操作指令 利用所学指令进行指令组合操作 什么是文件?什么是目录? 文件:一般是一个独立的东西,可以通过某些工具将其打开 目录:可以 ...

  3. 排查Mysql突然变慢的一次过程

    排查Mysql突然变慢的一次过程 上周客户说系统突然变得很慢,而且时不时的蹦出一个 404 和 500,弄得真的是很没面子,而恰巧出问题的时候正在深圳出差,所以一直没有时间 看问题,一直到今天,才算是 ...

  4. Linux安装配置PHPmyadmin

    进官网下载zip安装包 wget https://files.phpmyadmin.net/phpMyAdmin/5.0.1/phpMyAdmin-5.0.1-all-languages.zip 安装 ...

  5. java_数据类型转换、运算符

    数据类型转换 Java程序中要求参与计算的数据,必须要保证数据类型一致,如果数据类型不一致将发生类型的转换. 1.1 自动转换 一个 int 类型变量和一个 byte 类型变量进行加法运算,运算结果, ...

  6. 强开企业付款到零钱与现金红包，无需等待90/30天，2-12H即可强开通！

    一.微信官方给出的,企业付款到零钱|现金红包开通的说明 针对入账方式为即时入账至商户号,结算周期为T+1的商户,需满足三个条件:1)入驻满90天,2)连续正常交易30天,3)保持正常健康交易.其余结算 ...

  7. 【LifecycleException】: org.apache.catalina.LifecycleException: A child container failed during start 解决

    看了好多种解决方案: 第一种:从tomcat remove project -> clean project -> reboot project; 第二种:说用到的 jasper jsp解 ...

  8. 2020-03-27：分布式锁的问题，假如a线程在获得锁的情况下 网络波动 极端情况是断网了，这种情况是怎么处理的

    福哥答案2020-04-04:超时释放锁.

  9. C#LeetCode刷题之#657-机器人能否返回原点（Robot Return to Origin）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3959 访问. 在二维平面上,有一个机器人从原点 (0, 0) 开 ...

  10. Linux内核之 内核同步

    上文我们介绍过进程调度,Linux内核从2.6版本开始支持内核抢占,所以内核很多代码也需要同步保护. 一.同步介绍 1.临界区与竞争条件 所谓临界区(critical regions)就是访问和操作共 ...