最近在做一个导入导出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. 【LeetCode】673. Number of Longest Increasing Subsequence

    题目: Given an unsorted array of integers, find the number of longest increasing subsequence. Example ...

  2. oracle获得当前时间，精确到毫秒并指定精确位数

    oracle获得当前时间的,精确到毫秒   可以指定精确豪秒的位数 select to_char(systimestamp, 'yyyymmdd hh24:mi:ss.ff ') from dual; ...

  3. git之clone

    git clone 命令参数: usage: git clone [options] [--] <repo> [<dir>] -v, --verbose be more ver ...

  4. BZOJ2120：数颜色（莫队版）

    浅谈莫队:https://www.cnblogs.com/AKMer/p/10374756.html 题目传送门:https://lydsy.com/JudgeOnline/problem.php?i ...

  5. rabbitmq -- networking

    RabbitMQ大名鼎鼎, 其networking 部分经常被众多Erlang 程序员, 爱好者分析. 小的时候就见到很多人写过这方面的blog, 比如: 1, http://www.blogjava ...

  6. Java基础--反射Reflection

    Reflection 反射能在运行时获取一个类的全部信息,并且可以调用类方法,修改类属性,创建类实例. 而在编译期间不用关心对象是谁 反射可用在动态代理,注解解释,和反射工厂等地方. -------- ...

  7. Day1--Python基础1--下半部分

    一..pyc是什么 1. Python是一门解释型语言? 我初学Python时,听到的关于Python的第一句话就是,Python是一门解释性语言,我就这样一直相信下去,直到发现了*.pyc文件的存在 ...

  8. kubernetes 学习 创建cronjob

    POM.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...

  9. 新手编译开发OpenWrt入门教程（自定义固件、ubuntu学习）

    转自:   http://www.znck007.com/forum.php?mod=viewthread&tid=21571 由于openwrt编译教程资料很多,不同的cpu芯片只需要选择对 ...

  10. 【SymmetricDS】SymmetricDS是如何工作的

    2018-04-20  by 安静的下雪天  http://www.cnblogs.com/quiet-snowy-day/p/8890785.html  本文翻译自SymmetricDS官方文档   ...