通过将json遍历进行字符串拼接，将字符串输出到csv文件，输出的文件不会再是html类型的文件而是真正的csv文件，代码如下

<html>

<head>

  <p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件</p>

  <button onclick='tableToExcel()'>导出</button>

</head>

<body>

  <script>

    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);

    }

</script>

</body>

</html>

js 实现纯前端将数据导出excel的更多相关文章

  1. js 实现纯前端将数据导出excel两种方式，亲测有效

    由于项目需要,需要在不调用后台接口的情况下,将json数据导出到excel表格,兼容chrome没问题,其他还没有测试过 通过将json遍历进行字符串拼接,将字符串输出到csv文件,输出的文件不会再是 ...

  2. 纯前端实现数据导出excel文件

    一  安装依赖 npm install -S file-saver xlsx npm install -D script-loader 二 新建文件夹 在网上百度引入即可 三 在main.js中引入 ...

  3. 如何使用JavaScript实现纯前端读取和导出excel文件

    js-xlsx 介绍 由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls.xlsx.ods(一种OpenOffice专 ...

  4. 如何使用JavaScript实现纯前端读取和导出excel文件（转）

    转自小茗同学博客:https://www.cnblogs.com/liuxianan/p/js-excel.html js-xlsx 介绍 由SheetJS出品的js-xlsx是一款非常方便的只需要纯 ...

  5. 前端表格数据导出excel

    使用tableExport.js导出bootstrap-table表格成excel并且支持中文 1. 下载tableExport.js https://github.com/hhurz/tableEx ...

  6. JS实现前端将数据导出excel

    点击此跳到原文,原文有效果动图. 方法一 将table标签,包括tr.td等对json数据进行拼接,将table输出到表格上实现,这种方法的弊端在于输出的是伪excel,虽说生成xls为后缀的文件,但 ...

  7. 前端Table数据导出Excel使用HSSFWorkbook(Java)

    一.实现原理: 1. 前端查询列表数据并渲染至table(<table>...</table>)表格 2. 表格html代码传输至后台 3. 后台把html转成Excel输出流 ...

  8. 如何使用JavaScript实现前端导入和导出excel文件

    一.SpreadJS 简介 SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件,以“高速低耗.纯前端.零依赖”为产品特色,可嵌入任何操作系统,同时满足 .NE ...

  9. JavaScript 上万条数据 导出Excel文件（改装版）

    最近项目要js实现将数据导出excel文件,网上很多插件实现~~那个开心呀,谁知道后面数据量达到上万条时出问题:浏览器不仅卡死,导出的excel文件一直提示网络失败.... debug调试发现var  ...

随机推荐

  1. 使用Jackson来实现Java对象与JSON的相互转换的教程

    一.入门Jackson中有个ObjectMapper类很是实用,用于Java对象与JSON的互换.1.JAVA对象转JSON[JSON序列化] 1 2 3 4 5 6 7 8 9 10 11 12 1 ...

  2. python discover 函数介绍

    discover(start_dir,pattern='test*.py',top_level_dir=None)找到指定目录下所有测试模块,并可递归查到子目录下的测试木块,只有匹配到的文件名才会被加 ...

  3. C++ 静多态与动多态

    多态是指通过单一的标识支持不同的特定行为的能力. C++中有两种多态,称为动多态(运行期多态)和静多态(编译期多态),而静多态主要通过模板来实现,宏也是实现静多态的一种途径. 动多态在C++中是通过虚 ...

  4. <node.js爬虫>制作教程

    前言:最近想学习node.js,突然在网上看到基于node的爬虫制作教程,所以简单学习了一下,把这篇文章分享给同样初学node.js的朋友. 目标:爬取 http://tweixin.yueyishu ...

  5. 移动端禁止图片长按和vivo手机点击img标签放大图片,禁止长按识别二维码或保存图片【转载】

    移动端禁止图片长按和vivo手机点击img标签放大图片,禁止长按识别二维码或保存图片 img{ pointer-events: none; } 源文地址:https://www.cnblogs.com ...

  6. 在CentOS7命令行模式下安装虚拟机

    转载:https://blog.csdn.net/sunnyfg/article/details/51493602 1.主机环境描述: 操作系统:CentOS7 系统GUI:无 CPU:Intel4代 ...

  7. Ubuntu 18.04 更改静态IP

    2018年4月26日,ubuntu 18.04发行,第一时间下载安装了SERVER版本.使用VM14版本的虚拟机,开始使用DHCP获得IP地址,没有意外,可以直接上网.然而在更改VM的网络模式为桥接模 ...

  8. disconf-client-for-java

    一.disconf客户端部署 disconf目前仅支持java客户端,下文针对java客户端安装作为整理,记录下安装部署的步骤 1.环境依赖 首先需要安装java环境及maven环境,不再过多介绍 2 ...

  9. Arduino可穿戴教程之第一个程序——连接硬件选择板子(二)

    Arduino可穿戴教程之第一个程序——连接硬件选择板子(二) 2.4.2  连接硬件 在选择好示例程序后就可以将LilyPad通过LilyPad编程器连接到电脑了. 2.4.3  选择板子 如果你了 ...

  10. android fragment activity 区别

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha fragment  负责一个模块 的展示. 由 活动 管理. 碎片 可以 解决 太多活动 ...