最近在做一个导入导出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. [独孤九剑]Oracle知识点梳理（一）表空间、用户

    本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracl ...

  2. loopqueue

    import java.util.Arrays; public class loopQueue <E>{ public Object[] data=null; private int ma ...

  3. webpack 故障处理

    Webpack 的配置比较复杂,很容出现错误,下面是一些通常的故障处理手段. 一般情况下,webpack 如果出问题,会打印一些简单的错误信息,比如模块没有找到.我们还可以通过参数 --display ...

  4. 正值表达式匹配html标签的属性值

    今天由于工作的需求,需要获取html标签的属性值,立即想到了正则表达式,标签如下: <circle id="ap_test" cx="200" cy=&q ...

  5. Java基础--枚举Enum

    Java中的枚举是一种特殊的类,可以将一组固定常量的集合组成一种类型,使用方便且类型安全.使用enum关键字定义. enum类型父类为Enum,通过Enum.class可见Enum为抽象类,实现了Co ...

  6. AngularJS：路由

    ylbtech-AngularJS:路由 1.返回顶部 1. AngularJS 路由 本章节我们将为大家介绍 AngularJS 路由. AngularJS 路由允许我们通过不同的 URL 访问不同 ...

  7. [python] itertools库学习

    最近做 cyber-dojo上的题,好几道都要用到排列组合.一开始我还老老实实自己写算法.后来一想,不对呀!python有那么多的库,为啥不用呢? 于是搜了下,发现这个:itertools 使用 he ...

  8. play 学习 四： 关于play跨域

    默认, 在满足下面三个条件的情况下,Play框架会做一CSRF(跨站点请求伪造) 的检查: 请求方法不是GET, HEAD 或 OPTIONS. 情求包含Cookie或者Authorization头. ...

  9. Python命令模块argparse学习笔记(二)

    argparse模块可以设置两种命令参数,一个是位置参数,一个是命令参数 位置参数 import argparse parser = argparse.ArgumentParser(descripti ...

  10. createprocess并行运算

    #include "stdafx.h"#include "windows.h"#include <iostream> using namespace ...