文档章节

Table表格导出为Excel、csv、txt、sql、json、xml、Word格式

BBF的第一次尝试
 BBF的第一次尝试
发布于 2017/09/09 15:51
字数 2023
阅读 45
收藏 1
点赞 0
评论 0

流程

1.先说下大体流程,本文只实现了简单的导出效果,不涉及业务,对于本文中有错误和其他问题,请指出留言给我,谢谢!

流程

表格形式

1.表格可以为静态页或动态加载而成,本文中用的是easyuiDatagrid生成的表格,导出过程用到了一些bootstrap的东西

**需要注意: datagrid或其他方法生成表格页面后,表格的内部结构会发生变化,以页面编译后的数据结构为准 **

2.生成后的表格结构: 浏览器加载编译后的页面

可以看到生成后的表格和正常表格结构大相径庭,其中包含一些我们不需要的结构,在后面选择输出内容时要注意

3.页面内容: 想要输出的表格内容

4.导出界面: 导出选择界面

5.导出界面代码 应用了easyui中的组件和data-table:

<td>
            <a href="javascript:void(0)" id="ep">选择导出格式</a>
            <div id="epm" style="width:150px;">
                <div  data-options="iconCls:'icon-color-wheel'" class="export-csv" data-table=".datagrid-htable">Save as CSV</div>
                <div class="menu-sep"></div>
                <div data-options="iconCls:'icon-text-list-numbers'" class="export-txt" data-table=".datagrid-htable" > Save as TXT</div>
                <div class="menu-sep"></div>
                <div data-options="iconCls:'icon-text-flip'" class="export-sql" data-table=".datagrid-htable" > Save as SQL</div>
                <div class="menu-sep"></div>
                <div  data-options="iconCls:'icon-clipboard'" class="export-json" data-table=".datagrid-htable" >Save as JSON</div>
                <div class="menu-sep"></div>
                <div data-options="iconCls:'icon-text-linespacing'"  class="export-xml" data-table=".datagrid-htable">Save as XML</div>
                <div class="menu-sep"></div>
                <div data-options="iconCls:'icon-page-white-excel'" class="export-excel" data-table=".datagrid-htable" >Export to Excel</div>
                <div class="menu-sep"></div>
                <div data-options="iconCls:'icon-page-white-word'"  class="export-doc" data-table=".datagrid-htable">Export to Word</div>
            </div>
        </td>

6.需要导入的包和脚本,另外还有主要涉及的3个js页下面会说,稍后我会挂到附件,需要可以下载

<!--导出表格需要用到的js-->
<script src="../../plugins/select2/select2.min.js"></script>
<script src="../../plugins/tableExport/tableExport.js"></script>
<script src="../../plugins/tableExport/jquery.base64.js"></script>
<script src="../../plugins/tableExport/html2canvas.js"></script>
<script src="../../plugins/tableExport/jspdf/libs/sprintf.js"></script>
<script src="../../plugins/tableExport/jspdf/jspdf.js"></script>
<script src="../../plugins/tableExport/jspdf/libs/base64.js"></script>
<script src="../../js/informationCenter/table-export.js"></script>
<script src="../../js/informationCenter/main.js"></script>
<!--需要的脚本-->
<script>
    jQuery(document).ready(function () {
        Main.init();
        TableExport.init();
    });
</script>

导出

主要涉及的三个js页分别是main.js,table-export.js,tableExport.js 首先是main.js,基本不用改什么Down下来根据需要自己看下就可以用了, 然后是table-export.js,里面是一些监听和逻辑,下面说 最后是tableExport.js,里面是具体的一些实现

1.以下拿导出excel举例,其他格式大体相同,只有写入相应格式时不一样 table-export.js中绑定的监听事件:

Save excel的监听

  • 调用tableExport:
$(exportTable).tableExport({
						type: 'excel',
						escape: 'false',
						ignoreColumn: '['+ignoreColumn+']'
					});

2.其中的tableExport在tableExport.js里面,tableExport.js里面东西比较多,我只说能实现功能的部分

  • 绑定的tableExport一些属性,重点是下面那两个selector,其他根据需要,可以不修改: var defaults = { consoleLog: false, csvEnclosure: '"', csvSeparator: ',', csvUseBOM: true, displayTableName: false, escape: false, excelstyles: ['border-bottom', 'border-top', 'border-left', 'border-right'], fileName: 'tableExport', htmlContent: false, ignoreColumn: [], ignoreRow: [], jspdf: { orientation: 'p', unit: 'pt', format: 'a4', margins: { left: 20, right: 10, top: 10, bottom: 10 }, autotable: { padding: 2, lineHeight: 12, fontSize: 8, tableExport: { onAfterAutotable: null, onBeforeAutotable: null, onTable: null } } }, numbers: { html: { decimalMark: '.', thousandsSeparator: ',' }, output: { decimalMark: '.', thousandsSeparator: ',' } }, onCellData: null, outputMode: 'file', // file|string|base64 tbodySelector: 'tr', //用来后面选择导出表主体 theadSelector: 'tr', //同理这个用来导出表头 tableName: 'myTableName', //table名 type: 'csv', worksheetName: '项目统计' //sheetName };

    还有些其他的属性可以Down下来自己看下

3.看到这比较乱,说下主要的执行流程 程序的执行流程

4.上面三步中介绍了监听和默认属性,接下来我们看下和excel匹配的方法: 下面贴出的是完整方法,可以不看直接往下翻,从判断类型开始看

 else if (defaults.type == 'excel' || defaults.type == 'doc') {
                rowIndex = 0;
                var excelData = "<table>";
                // Header  excel
                $(".datagrid-htable tbody").last().find(defaults.theadSelector).each(function () {
                    trData = "";
                            ForEachVisibleCell(this, 'td', rowIndex,function (cell, row, col) {
                                if (cell != null) {
                                if (parseString(cell, row, col)!="") {
                                        trData += "<td style='";
                                        for (var styles in defaults.excelstyles) {
                                            if (defaults.excelstyles.hasOwnProperty(styles)) {
                                                trData += defaults.excelstyles[styles] + ": " + $(cell).css(defaults.excelstyles[styles]) + ";";
                                            }
                                        }
                                        if (parseString(cell, row, col) != "") {
                                            trData += "'>" + parseString(cell, row, col) + "</td>";
                                        }
                                     }
                                }
                                });
                            if (trData.length > 0)
                                excelData += "<tr>" + trData + '</tr>';
                            rowIndex++;
                });
                // Row Vs Column excel
                $(".datagrid-btable tbody").last().find(defaults.tbodySelector).each(function () {
                    trData = "";
                        ForEachVisibleCell(this, 'td', rowIndex,function (cell, row, col) {
                                if (cell != null) {
                                    if (parseString(cell, row, col)!="") {
                                    trData += "<td style='";
                                    for (var styles in defaults.excelstyles) {
                                        if (styles != 0 && styles != 1 && styles != 2 && styles != 3) {
                                            continue;
                                        }
                                        if (defaults.excelstyles.hasOwnProperty(styles)) {
                                            trData += defaults.excelstyles[styles] + ": " + $(cell).css(defaults.excelstyles[styles]) + ";";
                                        }
                                    }
                                    if ($(cell).is("[colspan]"))
                                        trData += "' colspan='" + $(cell).attr('colspan');
                                    if ($(cell).is("[rowspan]"))
                                        trData += "' rowspan='" + $(cell).attr('rowspan');
                                    trData += "'>" + parseString(cell, row, col) + "</td>";
                                    }
                                }
                            });
                        if (trData.length > 0)
                            excelData += "<tr>" + trData + '</tr>';
                        rowIndex++;

                });

                if (defaults.displayTableName)
                    excelData += "<tr><td></td></tr><tr><td></td></tr><tr><td>" + parseString($('<p>' + defaults.tableName + '</p>')) + "</td></tr>";

                excelData += '</table>';

                if (defaults.consoleLog === true)
                    console.log(excelData);

                var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' " +
                    "xmlns:x='urn:schemas-microsoft-com:office:" + defaults.type + "' " +
                    "xmlns='http://www.w3.org/TR/REC-html40'>";
                excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-' + defaults.type + '; charset=UTF-8">';
                excelFile += '<meta http-equiv="content-type" content="application/';
                excelFile += (defaults.type === 'excel') ? 'vnd.ms-excel' : 'msword';
                excelFile += '; charset=UTF-8">';
                excelFile += "<head>";
                if (defaults.type === 'excel') {
                    excelFile += "<!--[if gte mso 9]>";
                    excelFile += "<xml>";
                    excelFile += "<x:ExcelWorkbook>";
                    excelFile += "<x:ExcelWorksheets>";
                    excelFile += "<x:ExcelWorksheet>";
                    excelFile += "<x:Name>";
                    excelFile += defaults.worksheetName;
                    excelFile += "</x:Name>";
                    excelFile += "<x:WorksheetOptions>";
                    excelFile += "<x:DisplayGridlines/>";
                    excelFile += "</x:WorksheetOptions>";
                    excelFile += "</x:ExcelWorksheet>";
                    excelFile += "</x:ExcelWorksheets>";
                    excelFile += "</x:ExcelWorkbook>";
                    excelFile += "</xml>";
                    excelFile += "<![endif]-->";
                }
                excelFile += "</head>";
                excelFile += "<body>";
                excelFile += excelData;
                excelFile += "</body>";
                excelFile += "</html>";

                if (defaults.outputMode == 'string')
                    return excelFile;

                var base64data = base64encode(excelFile);

                if (defaults.outputMode === 'base64')
                    return base64data;

                var extension = (defaults.type === 'excel') ? 'xls' : 'doc';
                try {
                    var blob = new Blob([excelFile], { type: 'application/vnd.ms-' + defaults.type });
                    saveAs(blob, defaults.fileName + '.' + extension);
                }
                catch (e) {
                    downloadFile(defaults.fileName + '.' + extension, 'data:application/vnd.ms-' + defaults.type + ';base64,' + base64data);
                }

            }

判断类型:

} else if (defaults.type == 'excel' || defaults.type == 'doc') {

5.选择要到导出的范围和数据,注意导出的数据格式

选择数据范围

上图中选中的蓝色部分,从$一直到each之前,通过选择器选择要到处的数据,看下数据的格式:

导出的表格内容,每一行的数据

正确选择想要导出的东西,不然表格的内容会出现一些你看起来莫名其妙的问题, 选择时可以参照我最上面的表格结构来对比看 很多时候表格都是后生成的,我们写选择器的时候要按照生成之后的结构来确定

6.拿到数据后.each来循环写入每行内容:

循环

  • 其中的foreach用来写单元格边框,用的时候可以debugger看下,是一段html,因为excel文件用记事本打开其实也是一段html:
for (var styles in defaults.excelstyles) {
                                            if (defaults.excelstyles.hasOwnProperty(styles)) {
                                                trData += defaults.excelstyles[styles] + ": " + $(cell).css(defaults.excelstyles[styles]) + ";";
                                            }
                                        }
  • 其中parseString(cell, row, col)方法返回的是你要写入表格单元格中的数据:
if (parseString(cell, row, col) != "") {
                                            trData += "'>" + parseString(cell, row, col) + "</td>";
                                        }
  • 判断不是空,就把它写在excel中的单元格里,是空则不写,但单元格还是存在,所以如果想要去掉空的单元格,上面写单元格边框时先判断是否有内容

  • 下面是parseString方法,可以看下,也可以吧tableExport.jsDown下来,里面有:

            function parseString(cell, rowIndex, colIndex) {
                var result = '';
                if (cell != null) {
                    var $cell = $(cell);
                    //在定义Export时默认给了false
                    if (defaults.htmlContent === true) {
                        result = $cell.html().trim();
                    }
                    else {
                        //拿到每个td中的值
                        result = $cell.text().trim().replace(/\u00AD/g, ""); // remove soft hyphens    删除软连接
                            //decimalMark为'.'  thousandsSeparator为','
                        if (defaults.numbers.html.decimalMark != defaults.numbers.output.decimalMark ||
                            defaults.numbers.html.thousandsSeparator != defaults.numbers.output.thousandsSeparator) {
                            var number = parseNumber(result);
                            if (number !== false) {
                                var frac = ("" + number).split('.');
                                if (frac.length == 1)
                                    frac[1] = "";
                                var mod = frac[0].length > 3 ? frac[0].length % 3 : 0;

                                result = (number < 0 ? "-" : "") +
                                    (defaults.numbers.output.thousandsSeparator ? ((mod ? frac[0].substr(0, mod) + defaults.numbers.output.thousandsSeparator : "") + frac[0].substr(mod).replace(/(\d{3})(?=\d)/g, "$1" + defaults.numbers.output.thousandsSeparator)) : frac[0]) +
                                    (frac[1].length ? defaults.numbers.output.decimalMark + frac[1] : "");
                            }
                        }
                    }

                    if (defaults.escape === true) {
                        result = escape(result);
                    }

                    if (typeof defaults.onCellData === 'function') {
                        result = defaults.onCellData($cell, rowIndex, colIndex, result);
                    }
                }
                return result;
            }

7.each后还会有一些结尾标签的写入,默认不用更改即可 例如:

  if (defaults.type === 'excel') {
                    excelFile += "<!--[if gte mso 9]>";
                    excelFile += "<xml>";
                    excelFile += "<x:ExcelWorkbook>";
                    excelFile += "<x:ExcelWorksheets>";
                    excelFile += "<x:ExcelWorksheet>";
                    excelFile += "<x:Name>";
                    excelFile += defaults.worksheetName;
                    excelFile += "</x:Name>";
                    excelFile += "<x:WorksheetOptions>";
                    excelFile += "<x:DisplayGridlines/>";
                    excelFile += "</x:WorksheetOptions>";
                    excelFile += "</x:ExcelWorksheet>";
                    excelFile += "</x:ExcelWorksheets>";
                    excelFile += "</x:ExcelWorkbook>";
                    excelFile += "</xml>";
                    excelFile += "<![endif]-->";
                }
                excelFile += "</head>";
                excelFile += "<body>";
                excelFile += excelData;
                excelFile += "</body>";
                excelFile += "</html>";       

到这里基本就可以实现了(最下面有执行的效果图)

其他格式导出

其他格式的导出和excel差不多,只有写入部分不同,默认即可不用更改按照上面excel的步骤就可以了

导出效果

导出的效果

选择导出

导出为excel:

excel

导出为word:

word

导出为sql: 这里写图片描述

总结

简单来说,用此方法导出,重点在导出数据的选择,尤其像easyui生成后,结构层次比较复杂,如果没有选到准确的数据范围,可能最后导出的数据不准备

相关js文件我会传到附件上,包括一个在网上下的基于bootstrap的demo,demo的出处已经找不到了,如果你知道请告诉我

附件下载地址:http://download.csdn.net/download/zyb2017/9971249 文章格式出现问题可以去我的csdn上查看:http://blog.csdn.net/zyb2017/article/details/77897272

© 著作权归作者所有

共有 人打赏支持
BBF的第一次尝试
粉丝 1
博文 12
码字总数 8483
作品 0
沈阳
[转]Excel导入到MySQL

参考网页+ http://www.cnblogs.com/latifrons/archive/2012/09/07/2675141.html+ http://my.oschina.net/xsh1208/blog/470245 引言 为了从 MSSQL (MS SQL server 2008r2) 转移数据库到 MySQ......

不避风云
2016/05/21
65
0
Excel导出为Lua table工具 - XlsxToLua

Excel表格数据导出为Lua table形式的工具,兼带数据检查功能 希望这个工具能为今后ulua手机游戏项目带来便利,使得策划可以用Excel进行配表,从而享受Excel各种强大的功能,而程序可以直接读...

zhangqi91
2016/03/30
2.2K
0
Navicat for MySQL 有哪些常用功能

Navicat for MySQL 是一套管理和开发 MySQL 或 MariaDB 的理想解决方案,支持单一程序,可同时连接到 MySQL和MariaDB。这个功能齐备的前端软件为数据库管理、开发和维护提供了直观而强大的图...

Navicat数据库管理工具
2016/06/02
148
1
使用ArcGIS Online小贴士-Excel CSV TXT文件的使用

第一手信息,来自ArcGIS云计算新浪微博http://weibo.com/arcgiscloud Excel是一个审查和处理数据的程序,可以很容易保存为txt或者csv文件,然后上传到ArcGIS Online上。下面有一些小贴士,来...

长平狐
2012/11/28
351
0
python中多种文件处理的方法

基础操作 在python 中,文件的操作分为面向目录和面向文件的,本质都是一样的。 面向目录的常见操作见下表: 面向文件的常见操作见下表: 在这些基本操作中,遍历目录并列出所有文件或者所需...

yue者长歌
2017/12/11
0
0
用代码从文件中导入数据到SQL Server

引言 导入数据到SQL Server 是常见的需求,特别是定期导入这种需求。 对于定期导入主要有以下几种方式可选择: Bulk Insert Bcp Utility OpenRowSet 写程序导入(使用poi, npoi, ExcelDataR...

傍晚雨
07/13
0
0
ActiveReports 报表控件正式发布 V11 新版本

全球最大的控件提供商葡萄城宣布,ActiveReports 报表控件将于近期发布V11版本,作为产品史上的一次重大发布,新版本将包括更高效的报表引擎、更多数据源格式的支持、Excel文件导入、多Y轴组...

葡萄城控件技术团队
2016/11/25
1K
7
与表格格式数据有关的 Python 库--Tablib

Tablib 是一个与表格格式数据有关的 Python 库,允许导入、导出、管理表格格式数据。 特性 1 导出/导入格式 Excel (Sets + Books) JSON (Sets + Books) YAML (Sets + Books) HTML (Sets) TSV...

Kinegratii
2015/10/13
622
0
Cocos数据篇[3.4](5) ——CSV文件解析

【唠叨】 在一个游戏中,通常会有很多怪物、关卡、技能等数据,这些数据不可能在代码里写死,一般都会使用配置文件保存,使用时再加载到内存。 CSV文件编辑起来十分简单,所以常常用来配置游...

shahdza
2015/02/18
0
0
从phpMyAdmin批量导入Excel内容到MySQL

文章作者:姜南(Slyar) 文章来源:Slyar Home (www.slyar.com) 转载请注明,谢谢合作。 之前发了《表达式变量批量替换器 batchSQL》这篇文章,有童鞋说导入数据用phpMyAdmin提供的csv导入功能...

CN.QS
2013/04/24
201
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

about git flow

  昨天元芳做了git分支管理规范的分享,为了拓展大家关于git分支的认知,这里我特意再分享这两个关于git flow的链接,大家可以看一下。 Git 工作流程 Git分支管理策略   git flow本质上是...

qwfys
今天
1
0
Linux系统日志文件

/var/log/messages linux系统总日志 /etc/logrotate.conf 日志切割配置文件 参考https://my.oschina.net/u/2000675/blog/908189 dmesg命令 dmesg’命令显示linux内核的环形缓冲区信息,我们可...

chencheng-linux
今天
1
0
MacOS下给树莓派安装Raspbian系统

下载镜像 前往 树莓派官网 下载镜像。 点击 最新版Raspbian 下载最新版镜像。 下载后请,通过 访达 双击解压,或通过 unzip 命令解压。 检查下载的文件 ls -lh -rw-r--r-- 1 dingdayu s...

dingdayu
今天
0
0
spring boot使用通用mapper(tk.mapper) ,id自增和回显等问题

最近项目使用到tk.mapper设置id自增,数据库是mysql。在使用通用mapper主键生成过程中有一些问题,在总结一下。 1、UUID生成方式-字符串主键 在主键上增加注解 @Id @GeneratedValue...

北岩
今天
2
0
告警系统邮件引擎、运行告警系统

告警系统邮件引擎 cd mail vim mail.py #!/usr/bin/env python#-*- coding: UTF-8 -*-import os,sysreload(sys)sys.setdefaultencoding('utf8')import getoptimport smtplibfr......

Zhouliang6
今天
0
0
Java工具类—随机数

Java中常用的生成随机数有Math.random()方法及java.util.Random类.但他们生成的随机数都是伪随机的. Math.radom()方法 在jdk1.8的Math类中可以看到,Math.random()方法实际上就是调用Random类...

PrivateO2
今天
1
0
关于java内存模型、并发编程的好文

Java并发编程:volatile关键字解析    volatile这个关键字可能很多朋友都听说过,或许也都用过。在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果。在...

DannyCoder
昨天
0
0
dubbo @Reference retries 重试次数 一个坑

在代码一中设置 成retries=0,也就是调用超时不用重试,结果DEBUG的时候总是重试,不是0吗,0就不用重试啊。为什么还是调用了多次呢? 结果在网上看到 这篇文章才明白 https://www.cnblogs....

奋斗的小牛
昨天
2
0
数据结构与算法3

要抓紧喽~~~~~~~放羊的孩纸回来喽 LowArray类和LowArrayApp类 程序将一个普通的Java数组封装在LowArray类中。类中的数组隐藏了起来,它是私有的,所以只有类自己的方法才能访问他。 LowArray...

沉迷于编程的小菜菜
昨天
0
0
spring boot应用测试框架介绍

一、spring boot应用测试存在的问题 官方提供的测试框架spring-boot-test-starter,虽然提供了很多功能(junit、spring test、assertj、hamcrest、mockito、jsonassert、jsonpath),但是在数...

yangjianzhou
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部