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

纯前端导出Excel表格的更多相关文章

  1. vue 纯前端导出 excel 表格

    在开发后台管理系统的时候,很多地方都要用到导出excel 表格,比如将table中的数据导出到本地,那么实现这种需求往往有两种方案: 一.后端开发一个下载链接,前端将这个链接放到 a 标签的 href ...

  2. H5纯前端生成Excel表格

    H5纯前端生成Excel表格方法如下: <!DOCTYPE html> <html> <head> <title></title> < ...

  3. 前端导出excel表格

    前言近期项目有个新需求--将折线图表的数据加一个下载成excel表格的功能.以前下载功能都是调后台接口的,但是这个迭代,后台压力比较重,部分就交给了前端自己实现,下面就记录一下前端如何实现excel表 ...

  4. 使用javascript纯前端导出excel

    前言(感谢技术的分享者) 参考博客地址 github地址 由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls.xlsx ...

  5. 基于纯前端类Excel表格控件实现在线损益表应用

    财务报表也称对外会计报表,是会计主体对外提供的反映企业或预算单位一定时期资金.利润状况的会计报表,由资产负债表.损益表.现金流量表或财务状况变动表.附表和附注构成.财务报表是财务报告的主要部分,不包括 ...

  6. js前端导出Excel表格后数字自动变成科学计数法问题

    一般的文件导出都是后端进行导出,最近一个项目遇到导出接口挂掉了,前端实现导出的情况. 背景是vue框架,iView组件.可以直接使用exportCsv方法进行导出. 导出时进行一下行和列的切割就可以了 ...

  7. 一篇带你了解如何使用纯前端类Excel表格构建现金流量表

    现金流量表(Cash Flow Statement),是指反映企业在一定会计期间现金和现金等价物流入和流出的报表.现金流量表是企业财务报表的三个基本报告之一(另外两个是资产负债表和损益表). 为了全面 ...

  8. vue实现前端导出excel表格

    1.在src目录下创建一个文件(vendor)进入Blob.js和Export2Excel.js 2.npm install -S file-saver 用来生成文件的web应用程序 3.npm in ...

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

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

随机推荐

  1. python中 __file__的小坑坑

    在python脚本中,我们难免会需要用到自身文件所在的绝对路径,第一想法可能就是用os.path.dirname(__file__) 但是这里有个大坑,我就踩了,这种方式得到路径会出现问题,脚本执行报 ...

  2. [转帖]12条用于Linux的MySQL/MariaDB安全最佳实践

    12条用于Linux的MySQL/MariaDB安全最佳实践 2018-01-04 11:05:56作者:凉凉_,soaring稿源:开源中国社区 https://ywnz.com/linuxysjk ...

  3. Spring之一：IoC容器体系结构

    温故而知心. Spring IoC概述 常说spring的控制反转(依赖反转),看看维基百科的解释: 如果合作对象的引用或依赖关系的管理要由具体对象来完成,会导致代码的高度耦合和可测试性降低,这对复杂 ...

  4. php+lottery.js制作九宫格抽奖实例

    php+lottery.js制作九宫格抽奖实例,本抽奖功能效果表现好,定制方便简单,新手学习跟直接拿来用都非常不错,兼容IE.火狐.谷歌等浏览器. 引入抽奖插件lottery.js <scrip ...

  5. 简单说说utf-8编码格式

    提到utf-8,脑海里立马出现了Unicode.那什么是utf-8, 什么是Unicode呢?简要说一下. Unicode(Universal Multiple-Octet Coded Charact ...

  6. Java 面向对象的设计原则

    一. 1.面向对象思想的核心: 封装.继承.多态.   2.面向对象编程的追求: 高内聚低耦合的解决方案: 代码的模块化设计: 3.什么是设计模式: 针对反复出现的问题的经典解决方案,是对特定条件下( ...

  7. intelliJ idea安装go开发环境 并 搭建go项目 打包

    本人使用的是 idea 开发go项目  也是一个初学者  将自己遇到的问题记录分享 在晚上查找了很多资料  没有什么可以直接使用  本人再次整理一下 我使用的idea 时 2017.2.6 版本的 查 ...

  8. Cannot resolve the collation conflict between "SQL_Latin1_General_CP1_CI_AS" and "Chinese_PRC_CI_AI" in the equal to operation.

    Executed as user: NT AUTHORITY\SYSTEM. Cannot resolve the collation conflict between "Chinese_P ...

  9. 解决VS2005打开js,css,asp.php等文件,中文都是乱码的问题

    用记事本打开可以正常观看但是用VS2005编辑器打开JS,中文确实乱码. 解决办法:在VS 2005 的设置里面选择自动检测Utf-8:“工具”->“选项”->“文本编辑器”->“自 ...

  10. Guava动态调用方法

    前言 大家在Coding的时候,经常会遇到这样一个情况,根据不同的条件去执行对应的代码.我们通常的处理方式是利用if-else判断,或者直接switch-case,特别是jdk1.6之后,swith开 ...