5款优秀的在线表格生成工具

、在线表格编辑器——TablesGenerator

表格制作工具TablesGenerator是一个在线制作 LaTeX、HTML、Markdown 格式的表格代码工具，支持在表格中填充数据，修改字体/背景颜色，对齐方式等等，还支持从 Excel、Google Docs 里直接复制粘贴数据，以及多个 HTML 表格样式。Tables Generator 支持四种格式:LaTeX、HTML、Markdown、TEXT，先在 Table > Set size 中设置表格大小，然后填充数据，设置格式，就能在页面下面找到代码了。

2、在线表格编辑器——思迈特软件Smartbi

其以“真Excel”操作的特色，拥有了其它报表软件望尘莫及的功能特色。只要在Excel端安装Smartbi报表工具插件，用户就可以直接在Excel中设计报表格式或进行数据分析。Smartbi表格制作工具巧妙利用Excel自身的表格、图形、函数的能力，就能够实现各种BI应用，还可将报表一键发布到Web/APP端进行浏览，且软件内置多种免费的表格模板可供使用。

针对类似模板固定的Word/PPT分析报告，Smartbi利用Office分析报告插件，将报告模板中的数据元素数据（单数字、表格、图形）从“静态”变成“动态”，每当需要使用时，数据分析师可以像刷新报表一样刷新这些分析报告，按照所输入的参数对报告数据进行解读、讨论、建议，从而将更多时间用在“分析”上。

3、在线表格编辑器——FCKeditor 编辑器

FCKeditor 是一款开源的所见所得网页文本编辑器，可通过CKeditor设置表格，在表格中定义表单元素，主要支持文本框、复选框、单选框、单行文本、多行文本、列表、按钮、图片、隐藏域。

4、在线表格编辑器——Ueditor Formdesign Plugins Web表单设计器

Ueditor Formdesign 是开源免费的表单设计器，可应用于工作流管理系统、OA等，是一款可视化的Web表单构建器，HTML元素组件较丰富，主要包含：文本框、多行文本、下拉菜单、单选框、复选框、宏控件、进度条等，并可以生成二维码。

5、在线表格编辑器——SpreadJS

SpreadJS 在线Excel表格编辑器，是类似在线Excel功能和外观的在线表格编辑程序，也是 SpreadJS 桌面设计器的在线版本，提供源代码，可自由定制，任意扩展。该产品内嵌了SpreadJS，使用离线和在线方式均可进行表格编辑。

、背景

现在web技术蓬勃发展，办公应用特别是excel都搬到了线上，比较流行的有腾讯文档，金山文档，石墨文档，google doc，这些都属于企业服务。但是小型企业或者团队，如果想自己搭建一套在线表格系统呢？有没有开源的方案？

当然是有的，一些表格具有相对简单的功能，只能显示数据和过滤器功能，或者某些表格支持多种单元格样式，但是此类功能需要付费。比较出名有spreadjs，handsontable，这两个插件有明显的缺点，spreadjs增值功能收费太贵，handsontable二次开发坑很多。

Luckysheet ，是一款国产的纯JS实现的类似excel的在线表格，功能强大、配置简单、完全开源。

Luckysheet是用纯JavaScript编写的前端表格库，可以嵌入到任何前端项目或应用程序中，增强原有的系统功能，而无需使用excel或其他复杂的软件进行数据处理。

这使我们的数据处理、分析、显示和存储可以由一个系统完成，而无需切换平台，不切换系统，便于集成和完全自动化。

2、介绍

“我们决心制作一个功能最丰富，配置和使用最简单的开源电子表格-Luckysheet，为企业报表平台和数据分析平台提供支持，并建立一个数据分析社区。具体来说，我们提供了一个类似于excel的在线编辑表格，其中包含单元格样式，公式，过滤，冻结和其他功能。我们基本支持excel的常用功能，数据分析，显示和编辑的需求。” —Luckysheet作者

Luckysheet ，是一款国产的纯JS实现的类似excel的在线表格，功能强大、配置简单、完全开源。

开源地址：https://gitee.com/mengshukeji/Luckysheet

在线文档：https://mengshukeji.github.io/LuckysheetDocs/zh/guide

在线演示：https://mengshukeji.gitee.io/luckysheetdemo

3、基本使用

要使用LuckySheet，有2种方式，可以从官网下载JS，然后引入本地页面，也可以引入CDN。

3.1 引入JS

<link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./plugins/plugins.css' />
<link rel='stylesheet' href='./css/luckysheet.css' />
<link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
<script src="./plugins/js/plugin.js"></script>
<script src="./luckysheet.umd.js"></script>

3.2 置放Excel容器

<div id="luckysheet"></div>

3.3 初始化Excel

<script>
    $(function () {
        //配置项
        var options = {
            container: 'luckysheet' //luckysheet为容器id
        }
        luckysheet.create(options)
    })
</script>

这样，一个在线Excel就完成了。LuckySheet只提供前端的操作，数据保存要由开发人员自己实现。

3.4 数据保存

数据保存分为两种，一种是：实时保存，一种是“全部保存”。实时保存比较复杂，现在介绍一种简单的全部保存方法。

LuckySheet提供了一个 luckysheet.getAllSheets() 方法，调用此方法，Luckysheet系统会把所有数据一股脑的传递给你，
你可以再页面的OnClick的保存事件里保存这些数据，然后利用Jquery的Post方法，接收数据写入数据库。

下面代码演示了把Luckysheet POST到 xls.aspx 页面

function save() {
             var data2 = luckysheet.getAllSheets();
             var cnt = JSON.stringify(data2);
             $.post("xls.aspx",   {
                 cnt: cnt
             });
 }

在 xls.aspx页面，利用 Request[“cnt”] 就可以获取所有数据，然后保存到数据库。

3.5 数据还原

LuckySheet提供了loadUrl属性，当前端初始化完毕后，luckysheet会调用此属性加载初始化数据。所以，利用此属性，可以还原数据库里保存的数据。

var options = {
                  container: 'luckysheet',
                  lang: 'zh',
                  showinfobar: false, 
                  row: 20,
                  column: 15,
                  plugins: ['chart'],
                  showstatisticBar: false,
                  loadUrl: 'data.aspx?id=11', //还原数据URL
                  showsheetbar: false,
                  showsheetbarConfig: {
                      add: false,
                      menu: false,
                  }

4、数据缓存

（1） Luckysheet允许在本地加载Luckysheet需要的JS,CSS等，但是这些JS、CSS比较大，为此，可以利用link的prefetch预加载CSS,JS。

  <link rel="prefetch" href="../javascript/luckysheet/plugins/css/pluginsCss.css"  />
  <link rel="prefetch" href="../javascript/luckysheet/plugins/plugins.css"  />
  <link rel="prefetch" href="../javascript/luckysheet/css/luckysheet.css"  />
  <link rel="prefetch" href="../javascript/luckysheet/assets/iconfont/iconfont.css"  /> 
  <link rel="prefetch" href="../javascript/luckysheet/plugins/js/plugin.js"  />
  <link rel="prefetch" href="../javascript/luckysheet/luckysheet.umd.js"  />

（2）Luckysheet在插入图片时，图片会议Base64格式存储，所以，最终保存的数据可能非常大。

（3）需要理解Excel的一些简单概念：一个Excel是由多个Sheet组成，而一个Sheet是由多个Cell组成，而每个单元格都会包括 r，c，v（r:单元格的行 row、c：单元格的列 column、 v：单元格的值 value），在使用实时保存时，二维数组数据转化成 {r, c, v}格式一维数组。实时保存数据量小，但是比较复杂。

5、导入导出

LuckySheet提供了一个LuckyExcel，他支持Excel的导入和导出。

演示：https://mengshukeji.gitee.io/luckyexceldemo

6、生成图表

Luckysheet可以使用Echart生成图表组件（饼形图，柱状图，曲线图等）。

.表格的制作

1、表格元素–<table>

表格中的行–<tr>

表格中的列–<td>

表格中的表头–【居中/加粗】

table标记的边框–border

table标记的宽度–width

table标记的高度–height

table标记的水平对齐方式–align

table标记的表格背景色–bgcolor

table标记的表格边框色–bordercolor

table标记的表格中的内容与边框之间的距离–cellpadding

table标记的表格中的边框与边框之间的距离–cellspacing【默认是1px】

tr标记的align属性–设置当前行的水平对齐方式

tr标记的bgcolor属性–设置当前行的背景色

tr标记的valign属性–设置当前行的垂直对齐方式【top/middle/bottom】

td标记的align属性–设置当前列的水平对齐方式

td标记的bgcolor属性–设置当前列的背景色

td标记的valign属性–设置当前列的垂直对齐方式【top/middle/bottom】

合并单元格

水平方向合并单元格–跨列—colspan

垂直方向合并单元格–跨行—rowspan
删除多余的单元格*

以下是计算器的控制面板代码

<!DOCTYPE html>

<html>

<head>

<title>计算器的控制面板</title>

</head>

<body>

<table border="1" cellspacing="10px" cellpadding="20px"

align="center" bgcolor="aliceblue">

</tr>

</tr>

</tr>

</tr>

<td rowspan="2" bgcolor="yellow">=

</td>

</tr>

</tr>

</table>

</body>

</html>

看成品:

2. 列表元素

2.1 有序列表

ol—有序列表

li—列表中的每一项【条目】

默认的标志是有顺序的数字

我们可以通过ol的type属性来修改标志

1–有顺序的数字

a–有顺序的小写字母

A–有顺序的大写字母

i–有顺序的小写罗马数字

I–有顺序的大写罗马数字

start属性设置书顺序的开始值

2.2 无序列表

ul—无序列表

li—列表中的每一项【条目】

默认的标志是实心点

我们可以通过ul的type属性来修改标志

circle–圆形【。】

disc----实心点[默认]

square–正方形

none–没有标志

2.3 自定义列表

dl—自定义列表

dt—自定义列表的头

dd—子项目

以下是有序，无序，和自定义列表

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</ul>

</ol>

<dl>

<dt>自定义列表</dt>

</dl>

</body>

</html>

3. 表单<form>

主要负责采集信息的，可以将采集的信息提交。

form的属性

action—指定表单数据的后端处理程序

method----指定表单数据的提交方式【get[默认]/post】

get提交数据会将被处理的数据跟随在请求地址之后

被提交的数据255个字符

https://www.baidu.com/s?&wd=html

post提交数据会将被处理的数据封装到http协议的头

https://www.baidu.com/s

被提交的数据没有限制

通常情况下提交文件只能用post

enctype属性规定在将表单数据发送到服务器之前如何对其进行编码。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

<td>application/x-www-form-urlencoded</td>

<td>在发送前对所有字符进行编码（默认）。</td>

</tr>

<tr>

<td>multipart/form-data</td>

<td>不对字符编码。当使用有文件上传控件的表单时，该值是必需的。

</td>

</tr>

<tr>

<td>text/plain</td>

<td>将空格转换为 "+" 符号，但不编码特殊字符。</td>

</tr>

</table>

</body>

</html>

表单元素

input 文本框/密码框/单选按钮/复选框…

seletc 下拉列表

textarea 文本域—富文本编辑器

在线咨询

上一篇：HTML背景色教程–如何更改Div背景色，并通过代码示例进行了说明
下一篇：在HTML页面中嵌入其他页面的方法-零基础自学网页制作

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

5款优秀的在线表格生成工具

、背景

2、介绍

3、基本使用

3.1 引入JS

3.2 置放Excel容器

3.3 初始化Excel

3.4 数据保存

3.5 数据还原

4、数据缓存

5、导入导出

6、生成图表

您的项目需求