<!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运行进度条

    本文介绍了目前6种比较常用的进度条,让大家都能直观地看到脚本运行最新的进展情况 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做 ...

  2. CSS动画实例：图文切换

    先准备好一张图片,在页面中放置一个类名为container的层作为图文容器,在该层中再定义两个层:一个类名为image-box的层放置图片,一个类名为text-desc的层放置文本描述,HTML代码描 ...

  3. Prometheus Operator 教程：根据服务维度对 Prometheus 分片

    原文链接:https://fuckcloudnative.io/posts/aggregate-metrics-user-prometheus-operator/ Promtheus 本身只支持单机部 ...

  4. C#LeetCode刷题之#645-错误的集合（Set Mismatch）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3887 访问. 集合 S 包含从1到 n 的整数.不幸的是,因为数 ...

  5. 个性探测综述阅读笔记——Recent trends in deep learning based personality detection

    目录 abstract 1. introduction 1.1 个性衡量方法 1.2 应用前景 1.3 伦理道德 2. Related works 3. Baseline methods 3.1 文本 ...

  6. 使用 VMware Workstation Pro 让 PC 提供云桌面服务——学习笔记（一）

    最终效果: 能够通过xshell等终端设备, 远程访问虚拟机 操作步骤 1. 安装VMware 网上自行下载VMware 软件,这里不给出详细操作 2. 下载安装系统 这里使用 Centos 的lin ...

  7. do...while循环语句（水仙花）

    #define _CRT_SECURE_NO_WARNINGS#include<stdio.h>#include<string.h>#include<stdlib.h&g ...

  8. 神经网络实现fashion数据集

    import tensorflow as tf import numpy as np fashion=tf.keras.datasets.fashion_mnist (x_train,y_train) ...

  9. JavaScript基础-03

    1. 条件判断语句 若条件成立才会执行,条件不成立则语句不执行: if语句 语法一: if(条件表达式) {语句}          :true就执行,false不执行: 语法二: if(条件表达式) ...

  10. 洛谷P1308.统计单词数(字符串匹配)

    题目描述 一般的文本编辑器都有查找单词的功能,该功能可以快速定位特定单词在文章中的位置,有的还能统计出特定单词在文章中出现的次数. 现在,请你编程实现这一功能,具体要求是:给定一个单词,请你输出它在给 ...