最近在做一个导入导出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 Longest Uncommon Subsequence II

    原题链接在这里:https://leetcode.com/problems/longest-uncommon-subsequence-ii/#/description 题目: Given a list ...

  2. 【LeetCode】008. String to Integer (atoi)

    Implement atoi to convert a string to an integer. Hint: Carefully consider all possible input cases. ...

  3. bat显示多行文字，逐个显示哦！不同的颜色！

    最近想修改bat文件输出提示的时候能有不同的颜色提示,在网上找了下,发现这个文章,实现的不错,先记录下来,留着后面研究. 这是曾经写的,又稍微改进了一下. @echo off set str=青天有月 ...

  4. jQuery判断 form表单提交时一些文本框的判断

    一: form表单提交时如果表单里有input标签为空那么不提交form表单. <head> <script type="text/javascript"> ...

  5. linux下的时间

    1.linux下时间管理机制: 在系统启动时,Linux操作系统将时间从CMOS中读到系统时间变量中,以后修改时间通过修改系统时间实现.为了保持系统时间与CMOS时间的一致性,Linux每隔11分钟会 ...

  6. webrtc doubango linphone

    1.doubango官网:http://www.doubango.org/ 2.doubango是一个开源的VOIP基础平台, 并能用于嵌入式和桌面系统的开源框架,该框架使用ANSCI-C编写,具有很 ...

  7. DCloud：目录

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

  8. MySQL脚本自动安装mysql-5.6.15-linux-glibc2.5-x86_64.tar.gz

    脚本安装mysql-5.6.15-linux-glibc2.5-x86_64.tar.gz 先准备好数据文件的路径 softdir='/data/soft' 把脚本和tar包放在相应的路径下,其实就是 ...

  9. SUSE 开启ssh、telnet

    SSH 1. /etc/ssh/sshd_config [SSH的配置文件] 2. SuSEfirewall2 stop #关闭防火墙 如图,输入命令 vi /etc/ssh/sshd_config ...

  10. 利用XmlDocument操作XML文件

    利用XmlDocument可以方便的操作XML文件. .操作XML文件基本方法 ()添加对System.Xml的引用,并使用using语句添加引用: ()假设要读取的XML文件如下: <?xml ...