最近在做一个导入导出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. Long Jumps（二分查找lower_bound（）函数的运用）

    Valery is a PE teacher at a school in Berland. Soon the students are going to take a test in long ju ...

  2. 九、python沉淀之路--递归、全局变量、局部变量、作用域

    一.递归 1.递归函数,同时使用嵌套,并且是将别的函数作用于调用函数里面 例1 num = [1,2,3,4,5] def add_one(i): return i+1 def reduce(i): ...

  3. 消息队列mq总结（重点看，比较了主流消息队列框架）

    转自:http://blog.csdn.net/konglongaa/article/details/52208273 http://blog.csdn.net/oMaverick1/article/ ...

  4. ShadowGun 图形技术分析

    https://zhuanlan.zhihu.com/p/27966138 ShadowGun虽然是2011年的移动平台的游戏demo,但是里面的很多优化技巧到现在来看都是很值得学习的,毕竟是上过西瓜 ...

  5. C# partial 说明(转)

    http://www.cnblogs.com/Echo_saq/archive/2012/11/19/2777058.html 1. 什么是局部类型? C# 2.0 引入了局部类型的概念.局部类型允许 ...

  6. Python 函数 id()

    id(object) 功能:返回的是对象的“身份证号”,唯一且不变,但在不重合的生命周期里,可能会出现相同的id值.此处所说的对象应该特指复合类型的对象(如类.list等),对于字符串.整数等类型,变 ...

  7. bzoj 5092 [Lydsy1711月赛]分割序列——高维前缀和

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=5092 套路地弄一个前缀异或和,就变成 f[ i ]=max_{j=0}^{i} { s[ j ...

  8. openwrt 按下回车才能显示图标信息

    如题所示,openwrt启动后,手动才能按下系统图标和信息. 如何却掉这个手动选项呢? 修改文件/SISP-L26.7.8-OpenWrt/build_dir/target-arm_uClibc-0. ...

  9. Day3-Python基础3--函数参数及调用

    一.return返回值 return的两个作用: 1)需要用一个变量来接受程序结束后返回的结果 2)它是作为一个结束符,终止程序运行 def test(): print("我是return前 ...

  10. Hudson和Jenkins的关系

    Jenkins is an open source continuous integration tool written in Java. The project was forked from H ...