最近在做一个导入导出Excel的功能，导出其他类型的文件都比较熟悉，但是导入跟导出一个Excel还是稍微特殊点。根据这次的经验，写了个导出的小样例。

　　总体思路就是json数据的key，value跟Excel的行列转换，还有就是解决数据在Excel表格中存放的位置，区域问题。

　　这里要用到的两个小插件，一个是xslx.js，一个是FileSaver.js，前者是来处理生成Excel的，后者是用来把文件下载保存到本地的。

下载地址：

https://github.com/eligrey/FileSaver.js

https://github.com/SheetJS/js-xlsx/tree/028d7010a516383cb9a2fdd0f0a919392e77600a/demos/angular

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>导出生成excel</title>

     <script src="js/xlsx.full.min.js"></script>

     <script src="js/FileSaver.min.js"></script>

 </head>

 <body>

     <button onclick="downloadExl(students)">导出</button>

     <script>

         var students = [{

             "name": "小明1",

             "age": "6",

             "sex": "男",

             "height": "60"

         }, {

             "name": "小明2",

             "age": "7",

             "sex": "男",

             "height": "70"

         }, {

             "name": "小明3",

             "age": "8",

             "sex": "男",

             "height": "80"

         }];

         function downloadExl(data, type) {

             var keys = Object.keys(data[0]);

             var firstRow = {};

             keys.forEach(function (item) {

                 firstRow[item] = item;

             });

             data.unshift(firstRow);

             var content = {};

             // 把json格式的数据转为excel的行列形式

             var sheetsData = data.map(function (item, rowIndex) {

                 return keys.map(function (key, columnIndex) {

                     return Object.assign({}, {

                         value: item[key],

                         position: (columnIndex > 25 ? getCharCol(columnIndex) : String.fromCharCode(65 + columnIndex)) + (rowIndex + 1),

                     });

                 });

             }).reduce(function (prev, next) {

                 return prev.concat(next);

             });

             sheetsData.forEach(function (item, index) {

                 content[item.position] = { v: item.value };

             });

             //设置区域,比如表格从A1到D10,SheetNames:标题，

             var coordinate = Object.keys(content);

             var workBook = {

                 SheetNames: ["helloSheet"],

                 Sheets: {

                     "helloSheet": Object.assign({}, content, { "!ref": coordinate[0] + ":" + coordinate[coordinate.length - 1] }),

                 }

             };

             //这里的数据是用来定义导出的格式类型

             var excelData = XLSX.write(workBook, { bookType: "xlsx", bookSST: false, type: "binary" });

             var blob = new Blob([string2ArrayBuffer(excelData)], { type: "" });

             saveAs(blob, "hello.xlsx");

         }

         //字符串转字符流

         function string2ArrayBuffer(s) {

             var buf = new ArrayBuffer(s.length);

             var view = new Uint8Array(buf);

             for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;

             return buf;

         }

         // 将指定的自然数转换为26进制表示。映射关系：[0-25] -> [A-Z]。

         function getCharCol(n) {

             let temCol = "",

                 s = "",

                 m = 0

             while (n > 0) {

                 m = n % 26 + 1

                 s = String.fromCharCode(m + 64) + s

                 n = (n - m) / 26

             }

             return s

         }

     </script>

 </body>

 </html>
 

Json数据导出生成Excel的更多相关文章

  1. JS 在页面上直接将json数据导出到excel，支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox

    JS 在页面上直接将json数据导出到excel,支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox <html> <head> </h ...

  2. 实现excel导入导出功能，excel导入数据到页面中，页面数据导出生成excel文件

    今天接到项目中的一个功能,要实现excel的导入,导出功能.这个看起来思路比较清楚,但是做起了就遇到了不少问题. 不过核心的问题,大家也不会遇到了.每个项目前台页面,以及数据填充方式都不一样,不过大多 ...

  3. 数据导出生成Excel附件使用POI的HSSFWorkbook对象

    比较常用的实现Java导入.导出Excel的技术有两种Jakarta POI和Java Excel.Jakarta POI 是一套用于访问微软格式文档的Java API.Jakarta POI有很多组 ...

  4. json数据导出excel

    最近做的一个项目涉及到把数据导出到excel里面,网上找来找去,最终找到两种办法,废话不多说了 第一种: 拿到表格的id就可以抓取表格的数据,导出到excel,这种方式简单粗暴,引入这两个插件即可. ...

  5. tablib把数据导出为Excel、JSON、CSV等格式的Py库（写入数据并导出exl）

    #tablib把数据导出为Excel.JSON.CSV等格式的Py库 #python 3 import tablib #定义列标题 headers = ('1列', '2列', '3列', '4列', ...

  6. MySQL数据导出为Excel, json,sql等格式

    MySQL数据经常要导出为Excel, json,sql等格式,通过步骤都很多,麻烦,现在通过Treesoft可以方便的导出你要的数据格式. 1.在线执行SQL,在数据列表中有相应按钮,方便的将数据导 ...

  7. Echarts 数据视图 生成Excel的方法

    一.生成Excel,两大方向:1后台生成Excel 查询数据库,使用NOPI生成Excel.2前台js生成Excel三种方式1)jquery.table2excel.js --采用,优势:兼容IE和C ...

  8. 学习笔记 DataGridView数据导出为Excel

    DataGridView数据导出为Excel   怎样把WinForm下的“DGV”里的绑定数据库后的数据导出到Excel中. 比如:在窗体里有个一“DGV”,DataGridView1,绑定了数据源 ...

  9. asp.net将数据导出到excel

    本次应用datatable导出,若用gridview(假设gridview设为了分页显示)会出现只导出当前页的情况. protected void btnPrn_Click(object sender ...

随机推荐

  1. swing之flowlayout

    import java.awt.FlowLayout; import javax.swing.JButton; import javax.swing.JFrame; //1.继承 JFrame类 // ...

  2. [Unity3D]关于U3D贴图格式压缩

    http://blog.sina.com.cn/s/blog_5b6cb9500102vi6i.html 因为有不少人都问过我压缩格式的问题,今天飞哥又重新提醒了一次.整理一下发个贴,以供大家查阅和讨 ...

  3. xj监控端口，模拟登陆脚本

    #!/bin/bash date=`date +%Y%m%d-%H%M` count=0 ip1=124.117.246.195 ip2=124.117.246.194 port1=(443 80 6 ...

  4. DCloud：目录

    ylbtech-DCloud:目录 1.返回顶部 1.5+ App开发入门指南 http://ask.dcloud.net.cn/article/89 2.   3. 2.返回顶部   3.返回顶部 ...

  5. 环形缓冲区的应用ringbuffer

    在嵌入式开发中离不开设备通信,而在通信中稳定性最高的莫过于环形缓冲区算法, 当读取速度大于写入速度时,在环形缓冲区的支持下不会丢掉任何一个字节(硬件问题除外). 在通信程序中,经常使用环形缓冲区作为数 ...

  6. Django 多条件多表查询实例问题

    当时想做一个多条件查询,但是对于要查询的信息,是分布在不同的表里,这就涉及到了多表查询问题. DjangoBook里提到了一些查询的方式,但是不够全面,就去百度搜了下. 当去网上百度搜多表查询,或多条 ...

  7. 2016.7.10 SqlServer语句中类似decode、substr、instr、replace、length等函数的用法

    Decode() 对应 case when函数 case CHARINDEX('/',start_point_name) when 0 then start_point_name else subst ...

  8. hadoop启动脚本分析及常见命令

    进程------------------ [hdfs]start-dfs.sh NameNode NN DataNode DN SecondaryNamenode 2NN [yarn]start-ya ...

  9. Python操作远程机器

    操作远程机器主要使用的有paramiko,WMI(Windows Management Instrumentation),SMBConnection. paramiko paramiko使用SSH2协 ...

  10. oracle --(四)表空间（tablespace)

    基本关系:数据库---表空间---数据段---分区---数据块 表空间(tablespace)表空间(tablespace)是包含物理数据文件的逻辑实体,存放数据库的所有可用数据,因此表空间的尺寸也是 ...