点击此跳到原文，原文有效果动图。

方法一

将table标签，包括tr、td等对json数据进行拼接，将table输出到表格上实现，这种方法的弊端在于输出的是伪excel，虽说生成xls为后缀的文件，但文件形式上还是html，代码如下

<html>

<head>

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

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

</head>

<body>

  <script>

    function tableToExcel(){

      //要导出的json数据

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

        },

      ]

      //列标题

      let str = '<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>';

      //循环遍历，每行加入tr标签，每个单元格加td标签

      for(let i = 0 ; i < jsonData.length ; i++ ){

        str+='<tr>';

        for(let item in jsonData[i]){

            //增加\t为了不让表格显示科学计数法或者其他格式

            str+=`<td>${ jsonData[i][item] + '\t'}</td>`;

        }

        str+='</tr>';

      }

      //Worksheet名

      let worksheet = 'Sheet1'

      let uri = 'data:application/vnd.ms-excel;base64,';

      //下载的表格模板数据

      let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"

      xmlns:x="urn:schemas-microsoft-com:office:excel"

      xmlns="http://www.w3.org/TR/REC-html40">

      <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>

        <x:Name>${worksheet}</x:Name>

        <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>

        </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->

        </head><body><table>${str}</table></body></html>`;

      //下载模板

      window.location.href = uri + base64(template)

    }

    //输出base64编码

    function base64 (s) { return window.btoa(unescape(encodeURIComponent(s))) }

</script>

</body>

</html>

方法二

通过将json遍历进行字符串拼接，将字符串输出到csv文件，代码如下

<html>

<head>

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

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

</head>

<body>

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

      //增加\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标签实现

      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>

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. 前端表格数据导出excel

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

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

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

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

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

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

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

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

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

  8. JavaScript 上万条数据 导出Excel文件 页面卡死

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

  9. 将页面中表格数据导出excel格式的文件（vue）

    近期由于项目需要,需要将页面中的表格数据导出excel格式的文件,折腾了许久,在网上各种百度,虽然资料不少,但是大都不全,踩了许多坑,总算是皇天不负有心人,最后圆满解决了. 1.安装相关依赖(npm安 ...

随机推荐

  1. P3900 [湖南集训]图样图森破

    P3900 [湖南集训]图样图森破 链接 分析: 感觉像个暴力. 可以枚举回文串的回文中心,即枚举一个串,枚举一个串的位置作为回文中心,然后求出这个串内的回文串的长度. 此时如果回文串两端都没有到这个 ...

  2. Kubernetes学习之路（一）之概念和架构解析和证书创建和分发

    1.Kubernetes的重要概念 转自:CloudMan老师公众号<每天5分钟玩转Kubernetes>https://item.jd.com/26225745440.html Clus ...

  3. Ubuntu环境下安装CUDA9.0

    前言: 本篇文章是基于安装CUDA 9.0的经验写,CUDA9.0目前支持Ubuntu16.04和Ubuntu17.04两个版本,如下图所示(最下面的安装方式我们选择第一个,即runfile方式): ...

  4. P3354 [IOI2005]Riv 河流

    树形dp,设f[i][j][k]表示第i个点的子树中选择j个点作为伐木场,而且k是建了伐木场的最浅的i的祖先的情况下,最小的收益. 这种题还要练一下,咕咕 然后转移可以n4方做. // luogu-j ...

  5. WCF 学习笔记一

    wcf服务的细节: 1.新建项目的时候有wcf服务应用程序和wcf服务库,两者区别在于前者可以寄宿在IIS上,而后者只能给其他项目使用,可以寄宿在控制台程序.窗体程序等等. 相关定义的链接 http: ...

  6. Windows下Redis集群搭建

    1.第一步先安装Redis 参照<Windows下Redis安装及使用.docx> 在Redis目录E:/Redis下新建Logs文件夹,并且创建3个端口下的配置文件,记得修改里面的接口 ...

  7. InsertionSort 直接插入排序（java）

    排序思想: 相当于一堆数字,一开始先取出2个数排序,2个数排好序之后,再从一堆数字里面取一个数排序,直到结束伪代码: INSERTION_SORT(A) for j = 2 to A.length k ...

  8. tensorflow-gpu在win10下的安装

    参考:https://blog.csdn.net/gyp2448565528/article/details/79451212 按照原博主的方法在自己的机器上会有一点小错误,下面的方法略有不同 环境: ...

  9. 求二维数组最大子数组的和。郭林林&胡潇丹

    求二维数组子数组的最大值,开始思路不太清晰.先从最简单的开始. 以2*2的简单数组为例找规律, 假设最大数为a[0][0],则summax=a[0][0],比较a[0][0]+a[0][1].a[0] ...

  10. 【Go】累加器的测试问题记录

    关于GoLang学习过程中的一个问题mark,教程上说两个累加器的地址应该是不一样的,但是实际测试出来结果一样 package main import( "fmt" ) func ...