由于项目需要，需要在不调用后台接口的情况下，将json数据导出到excel表格，兼容chrome没问题，其他还没有测试过

通过将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>

　　

参考了很多大佬的博客其中这两篇对我启发最大，感谢！

https://blog.csdn.net/oscar999/article/details/16342699
https://blog.csdn.net/aa122273328/article/details/50388673

https://blog.csdn.net/hhzzcc_/article/details/80419396

js 实现纯前端将数据导出excel两种方式，亲测有效的更多相关文章

  1. js 实现纯前端将数据导出excel

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

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

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

  3. 数据存储的两种方式：Cookie 和Web Storage

    数据存储的两种方式:Cookie 和Web Storage 1.Cookie Cookie的作用就像你去超市购物时,第一次给你办张购物卡,这个购物卡里存放了一些你的个人信息,下次你再来这个连锁超市时, ...

  4. 数据存储的两种方式：Cookie 和Web Storage（转）

    数据存储的两种方式:Cookie 和Web Storage   数据存储的两种方式:Cookie 和Web Storage 1.Cookie Cookie的作用就像你去超市购物时,第一次给你办张购物卡 ...

  5. Redis数据持久化的两种方式RDB和AOF

    由于Redis的数据都存放在内存中,如果没有配置持久化,redis重启后数据就全丢失了,于是需要开启redis的持久化功能,将数据保存到磁 盘上,当redis重启后,可以从磁盘中恢复数据.redis提 ...

  6. 大数据学习day33----spark13-----1.两种方式管理偏移量并将偏移量写入redis 2. MySQL事务的测试 3.利用MySQL事务实现数据统计的ExactlyOnce（sql语句中出现相同key时如何进行累加（此处时出现相同的单词））4 将数据写入kafka

    1.两种方式管理偏移量并将偏移量写入redis (1)第一种:rdd的形式 一般是使用这种直连的方式,但其缺点是没法调用一些更加高级的api,如窗口操作.如果想更加精确的控制偏移量,就使用这种方式 代 ...

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

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

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

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

  9. 前端表格数据导出excel

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

随机推荐

  1. c/c++/c# 快速计算 Cumulative Normal Distribution 正态累积函数CDF

    链接: http://stackoverflow.com/questions/2328258/cumulative-normal-distribution-function-in-c-c http:/ ...

  2. 洛谷P3387 缩点模板

    给定一个n个点m条边有向图,每个点有一个权值,求一条路径,使路径经过的点权值之和最大.你只需要求出这个权值和. 允许多次经过一条边或者一个点,但是,重复经过的点,权值只计算一次. 因为可以重复经过点, ...

  3. 消息队列RabbitMQ、缓存数据库Redis

    1.RabbitMQ消息队列 1.1 RabbitMQ简介 AMQP,即Advanced Message Queuing Protocol,高级消息队列协议,是应用层协议的一个开放标准,为面向消息的中 ...

  4. 从输入URL到浏览器显示页面

    去看经典是不会错的,如果觉得太长,那就休息一下继续看. 经验告诉我,读一篇经典足矣,不要浪费时间去搜索其他地方到处复制粘贴的博文. 所以奉上我过滤的经典: 1.How browser work 2.h ...

  5. 机器学习(四) SVM 支持向量机

    svr_linear = SVR('linear') #基于直线 svr_rbf = SVR('rbf') #基于半径 svr_poly = SVR('poly') #基于多项式

  6. js 设置 cookie

    function setCookie(name,value){ var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Day ...

  7. MD5WLBUtil

    import java.io.UnsupportedEncodingException; import java.security.NoSuchAlgorithmException; import j ...

  8. 10g duplicate and 11g dupliacte db for standby

    ###################10g Creating a Physical Standby Database OASSTBY Make sure database is in archive ...

  9. URLConnection简单使用

    1 --get提交 //资源url地址 URL url = new URL("http://localhost:8080/test/TestServlet?id=10"); //获 ...

  10. Windows安全认证是如何进行的？[Kerberos篇]

    最近一段时间都在折腾安全(Security)方面的东西,比如Windows认证.非对称加密.数字证书.数字签名.TLS/SSL.WS-Security等.如果时间允许,我很乐意写一系列的文章与广大网友 ...