<!DOCTYPE html>

<html lang="en">

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

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

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

        <script>

                function tableToExcel(){

                  //要导出的json数据

                  const 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`;

                  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标签实现

                  let 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/hhzzcc_/article/details/80419396(感谢大佬的分享)

前端导出excel文件的更多相关文章

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

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

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

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

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

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

  4. 前端必读3.0：如何在 Angular 中使用SpreadJS实现导入和导出 Excel 文件

    在之前的文章中,我们为大家分别详细介绍了在JavaScript.React中使用SpreadJS导入和导出Excel文件的方法,作为带给广大前端开发者的"三部曲",本文我们将为大家 ...

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

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

  6. 前端导出Excel兼容写法

    今天整理出在Web前端导出Excel的写法,写了一个工具类,对各个浏览器进行了兼容. 首先,导出的数据来源可能有两种: 1. 页面的HTML内容(一般是table) 2. 纯数据 PS:不同的数据源, ...

  7. JQGrid导出Excel文件

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  8. java POI导出Excel文件数据库的数据

    在web开发中,有一个经典的功能,就是数据的导入导出.特别是数据的导出,在生产管理或者财务系统中用的非常普遍,因为这些系统经常要做一些报表打印的工作.这里我简单实现导出Excel文件. POI jar ...

  9. 前端导出Excel

    1.首先,需要下载一个叫better-xlsx,的插件,以yarn 为例 ' yarn add better-xlsx --save '下载相关依赖包( npm 方式 ' npm i better-x ...

随机推荐

  1. haproxy教程

    一.haproxy简介 HAProxy is a free, very fast and reliable solution offering high availability, load bala ...

  2. 【GDOI2013模拟4】贴瓷砖

    题目 A镇的主街是由N个小写字母构成,镇长准备在上面贴瓷砖,瓷砖一共有M种,第i种上面有Li个小写字母,瓷砖不能旋转也不能被分割开来,瓷砖只能贴在跟它身上的字母完全一样的地方,允许瓷砖重叠,并且同一种 ...

  3. 容器"共享"宿主机的hosts文件（终极方案）

    0.背景 有时候制作docker镜像生成容器时需要宿主机的hosts文件共享到容器中.首先想的是通过挂载的方式共享hosts文件,但是实践时发现根本行不通,hosts文件在/etc/目录下,如进行挂载 ...

  4. C# 泛型 new{ }??? //加new 和不加new 有什么不同? new() 约束

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  5. sh_08_石头剪刀布

    sh_08_石头剪刀布 # 导入随机工具包 # 注意:在导入工具包的时候,应该将导入的语句,放在文件的顶部 # 因为,这样可以方便下方的代码,在任何需要的时候,使用工具包中的工具 import ran ...

  6. Replicate（网络复制）,ActorRole（角色）,Ownership（所有权）以及RPC（远程调用）等等

    I. Replication Replication指的是 从服务端向客户端 传递数据和信息的行为.注意是单向的,不会从客户端传递信息和数据到服务端. 假设一个Actor被设置为Replicates, ...

  7. Oracle使用正则表达式拆分字段里多行分布式值

    不规范的表设计往往会带来程序设计上的麻烦,也会降低SQL的性能. 例如下表显示的内容: 这样我们调取多值字段用来做匹配的话就比较麻烦,我们可以通过正则表达式REGEXP_SUBSTR先将 多值得列分成 ...

  8. 大数据笔记（二十六）——Scala语言的高级特性

    ===================== Scala语言的高级特性 ========================一.Scala的集合 1.可变集合mutable 不可变集合immutable / ...

  9. GIT的工作原理和基本命令

    1.GIT的工作原理 工作区:我们写代码的地方. 暂存区:临时存储用的. 历史区:生成历史版本的地方. 提交流程:工作区->暂存区->历史区 图示: 2.GIT的全局配置 3.创建仓库完成 ...

  10. 硬件-硬盘-SSD（固态硬盘）：百科

    ylbtech-硬件-硬盘-SSD(固态硬盘):百科 固态驱动器(Solid State Disk或Solid State Drive,简称SSD),俗称固态硬盘,固态硬盘是用固态电子存储芯片阵列而制 ...