您的网站因未备案或涉及违规被禁止访问，请及时联系实际接入商办理备案.现在位置：【图解】Web前端实现类似Excel的电子表格
在本文中，我将用图解的方式用Wijmo（JavaScript库）中的SpreadJS来一步一步实现网页上的电子表格产品SpreadSheet(例如可构建Office 365 Excel产品、Google的在线SpreadSheet).博文简介：Wijmo控件，是葡萄城提供的HTML/JavaScript库，目前最新版是4.7.22号发布)，支持jQuery UI和jQuery、jQuery Mobile、Angular.js、Bootstrap.js、Knockout.js等。同时，Wijmo提供了很多小部件(UI 控件), 以此非常方便用来构建一个Web应用程序或者网站。其中，Wijmo的SpreadJS提供了如下特性：由HTML5显示电子表格，可方便数据输入可方便的设定颜色、边框、字体可使用类似Excel公式可兼容JSON、CSV的数据输入、输出可进行数据分析：条件格式过滤等Cell图形展示日期、IME格式自定义的输入单元格类型触摸手势支持图形、图像的应用本文将涉及1~4点。&&谁适合阅读本文？如果你想了解Web站点和Web应用程序的构建技术如果你想在短时间内构建一个复杂的SpreadSheet类型的网站如果您想用纯前端、HTML5方式实现Web站点&必要的环境用如下环境进行开发Wijmo 2014 V2的Spread JS 3.20142.11jQuery UI 1.11.0jQuery 1.11.1jQuery Mobile 1.4.0Windows 8.1 64位版本IE浏览器11、Chrome 36.0. mSpreadJS版本和Wijmo许可证SpreadJS的授权包括在Wijmo企业中&Wijmo专业Wijmo企业Wijmo企业可选包基本widget??-SpreadJS-?-SpreadJS设计器及Excel的I / O--?技术支持???&Wijmo的个人授权基于MIT和GPL Version 2； 对企业用户而言，采用Wijmo企业版是性价比非常高的策略。其中包含在Wijmo企业版中的SpreadJS设计器和Excel I/O对于加快设计SpreadSheet非常有用，如可方便的查看JSON格式数据。使用前的准备SpreadJS CDN为了使用的SpreadJS，请在HTML中的head标签中列出描述。（1）在对语言进行说明，（2） - （5）是读取css和jQuery SpreadJS，jQuery的UI。&!-- SpreadJS语言设置（1）--&
&meta name="spreadjs culture" content="zh-cn" /&
&!-- jQuery、jQurey UI （2） --&
&script src="/jquery-1.11.1.min.js" type="text/javascript"&&/script&
&script src="/ui/1.11.0/jquery-ui.min.js" type="text/javascript"&&/script&
&!-- Wijmo CSS（3）--&
&link href="/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /&
&!-- SpreadJS（4） --&
&script src="/spreadjs/jquery.wijmo.wijspread.all.3.20142.11.min.js" type="text/javascript"&&/script&
&!-- SpreadJS CSS（5）--&
&link href="/spreadjs/jquery.wijmo.wijspread.3.20142.11.css" rel="stylesheet" type="text/css" /&首先，让我们来显示电子表格首先, 让我们试着简单地显示一个电子表格，您可以通过在HTML中，对wijspread元素, 安装如下的方法查看空电子表格，代码如下所示：&script id="scriptInit" type="text/javascript"&
$(document).ready( $(function () {
// SpreadJS 初始化
$("#wijspread1").wijspread();
&/script&备注：如果不指定div元素的大小电子表格的会在浏览器显示全屏，故通过对指定大小限制电子表格的显示范围。SpreadJS div元素的定义&div id="wijspread1" style="width: 480 height: 320 border: 1px solid gray"/&&SpreadJS在网页上显示空电子表格如图所示：这个简单的电子表格，此时已经神奇的拥有基本功能，可以输入数字或字母，并可以在单元格中输入公式。通过JavaScript对象中的参数设置到wijspread方法的参数，您可以自定义初始显示。我表2列出了主要参数。wijspread的主要参数和默认值：参数名称参数说明初始值sheetCountSheet标签页数1activeSheetIndex最初显示表标签页0tabEditable是否可编辑工作表名称trueallowUserResize是否更改列的大小TrueallowUserZoom是否可变焦TruenewTabVisible是否显示新标签页按钮true&如我们可设置2个参数，来初始为3个标签页，同时隐藏新建按钮，代码如下：&script id="scriptInit" type="text/javascript"&
$(document).ready( $(function () {
// SpreadJS 初始化
$("#wijspread1").wijspread({
sheetCount: 3, //初始化为3个标签页
newTabVisible:false //隐藏新建标签页按钮
&/script&&效果截图：在JavaScript中操作SpreadJS电子表格如同用Visual Basic来操作Excel的VBA，实现了Excel电子表格的操作；在这里，你也可以用JavaScript操纵SpreadJS 电子表格。为了操作电子表格，首先需要拿到wijspread对象，从而可以得到SpreadJS对象对应的表，可以获得表对象、单元格Cell对象等。然后，可以逐个进行每个对象的实际操作。& 如下的代码是通过调节单元格大小、设置字体、以及给文本单元格中赋值、autoFitColumn / autoFitRow方法的大小的一个例子。
// 获得Spread 对象
var spread = $("#wijspread1").wijspread("spread");
// 获得当前激活的标签页
var activeSheet = spread.getActiveSheet();
// 获得第2行2列单元格
var cell = activeSheet.getCell(1, 1);
// 对这个单元格进行赋值
cell.value("Wijmo SpreadJS");
//单元格设置字体大小
cell.font("15pt 宋体");
// 当前标签页自动进行行、列适应大小
activeSheet.autoFitColumn(1);
activeSheet.autoFitRow(1);&效果截图：&通过利用getCells方法，而不是getCell方法可以操作同时获得在一个范围内的多个单元：
// 获得第2行2列 ~ 第4行5列，并设置背景色
var cell = activeSheet.getCells(1, 1, 3, 4)
cell.backColor("#00ff00");同时，通过产生LineBorder对象的边界设置为小区设置单元，borderBottom borderRight的，borderLeft，每个方法borderTop。
// 获得LineBorder属性
var lineBorder = new $.wijmo.wijspread.LineBorder("#000000", $.wijmo.wijspread.LineStyle.thin);
// 设置边框
cell.borderTop(lineBorder);
cell.borderBottom(lineBorder);
cell.borderLeft(lineBorder);
cell.borderRight(lineBorder);您还可以设置边框的类型，通过修改LineStyle第二个参数-使用LineBorder。下表列出主要边框设置边框名称备注thin细实线medium粗实线thick粗实线dashed虚线dotted点线dashDot点虚线&在Excel中，有合并单元格的要求；使用SpreadJS，您也可以使用addSpan方法来合并多个单元格在工作表上，结果如同Excel一样：
activeSheet.addSpan(0, 0, 2, 4, $.wijmo.wijspread.SheetArea.colHeader);
activeSheet.addSpan(0, 0, 2, 4, $.wijmo.wijspread.SheetArea.rowHeader);
// 单元格結合
activeSheet.addSpan(0, 0, 2, 4, $.wijmo.wijspread.SheetArea.viewport);&&可以使用类似Excel的公式和函数您可以在Excel中通过设置公式中的单元格进行计算，如求和，平均值，同样地，SpreadJS也能帮您实现类似工作： Formula Functions如下的例子中，显示了平均值（AVERAGE函数）和总计（SUM函数）。您可以在单元格中设置公式的方法显示结果。
activeSheet.getCell(0, 0).value('考试成绩');
// 各科成绩
activeSheet.getCell(2, 0).value('语文');
activeSheet.getCell(2, 1).value(80);
activeSheet.getCell(3, 0).value('数学');
activeSheet.getCell(3, 1).value(70);
activeSheet.getCell(4, 0).value('英语');
activeSheet.getCell(4, 1).value(90);
activeSheet.getCell(5, 0).value('政治');
activeSheet.getCell(5, 1).value(45);
// 总分和平均分
activeSheet.getCell(6, 0).value("总分");
activeSheet.getCell(6, 1).formula("SUM(B3:B6)");
activeSheet.getCell(7, 0).value('平均分');
activeSheet.getCell(7, 1).formula("AVERAGE(B3:B6)");&使用CSV或JSON的输入和输出数据&您可以输出您在SpreadJS输入的数据，或者输入来自外部的数据到反向。格式与相应的CSV和JSON。我会在SpreadJS对象中输入和输出的JSON的toJSON / fromJSON方法，同时也会用到JSON.stringify/parse方法。//数据输出
function ExportJSON()
// 获得Spread 对象
var spread = $("#wijspread1").wijspread("spread");
var jsonStr = JSON.stringify(spread.toJSON());
$("#jsonCode").html(jsonStr);
////数据输入
function ImportJSON()
// 获得Spread 对象
var spread = $("#wijspread1").wijspread("spread");
var jsonObj = JSON.parse($("#jsonCode").html());
spread.fromJSON(jsonObj);
}&效果截图：&另一方面，以CSV的情况下，我将使用getCsv表对象中，该方法setCsv。Excel作为也就是使用CSV将容纳单元的情况下，输入和输出。您也可以指定起始位置和范围，单元格的分隔符。//导出CSV字符串
function ExportCSV() {
// 获得Spread 对象
var spread = $("#wijspread1").wijspread("spread");
var csvString = spread.getActiveSheet().getCsv(
// 行分割字符
// 列分割字符
$("#jsonCode").html(csvString);
//导入CSV字符串
function ImportCSV() {
// 获得Spread 对象
var spread = $("#wijspread1").wijspread("spread");
var csvString = $("#jsonCode").html();
spread.getActiveSheet().setCsv(
csvString,
// CSV字符串
// 行分割字符
// 列分割字符
$.wijmo.wijspread.TextFileOpenFlags.None // 导入选项
}&但应注意的是，能在表4中指定的值来setCsv方法的导入标记。默认为无。TextFileOpenFlags选项选项的内容ImportFormula导入公式ncludeColumnHeader包含列标题IncludeRowHeader有标题行None无（默认)UnFormatted格式化的数据&总结在这篇文章中，通过代码实例和图解的方式，用Wijmo库提供的SpreadJS JavaScript组件来实现电子表格。SpreadJS提供了数据录入和计算，一级数据的显示，如导入和导出为CSV / JSON格式，可用于在Web浏览器上进行浏览。这种方法，对设计Web前端的类似Excel的电子表格非常有用的。在Wijmo，可选包Wijmo企业可以作为一个选项，以采取更方便SpreadJS优势。通过使用包含在此选项Spread设计器，您可以创建一个独立的应用程序的数据SpreadJS。在Excel中的IO服务允许您与您在SpreadJS创建或导入Excel文件中的数据输出Excel文件。---------------------------------------------------------------------------Wijmo中文网站：.cn/&Wijmo使用文档： /docs/wijmo/#WijmoUserGuide.htmlWijmo在线Demo：/demos/
最新教程周点击榜
微信扫一扫Servlet技术（30）
导出并下载csv格式的表格（逗号分隔文件）
以导出销售榜单为例
package cn.estore.web.
import java.io.IOE
import java.io.PrintW
import java.util.L
import javax.servlet.ServletE
import javax.servlet.http.HttpS
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
import cn.estore.domain.BankI
* 下载 排行榜单 CSV格式
* @author seawind
public class ExportServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 1、获得session中排行榜单
List&BankItem& banklist = (List&BankItem&) request.getSession()
.getAttribute(&banklist&);
// ************设置csv文件下载头信息**************
String fileName = &bank.csv&;
// &span style=&font-family: Arial, Helvetica, sans-&&************&/span&&span style=&font-family: Arial, Helvetica, sans-&&设置文件类型**************&/span&
response.setCharacterEncoding(&gbk&);
response.setContentType(getServletContext().getMimeType(fileName));
// **********设置以附件打开***********
response.setHeader(&Content-Disposition&, &filename=&
+ fileName);
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~核心代码~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// 2、导出csv文件
PrintWriter pw = response.getWriter();
// 3、通过response输出流 输出csv文件
pw.println(&排名,编号,名称,价格,销售数量&);
for (int i = 0; i & banklist.size(); i++) {
BankItem bankItem = banklist.get(i);
pw.println((i + 1) + &,& + bankItem.getId() + &,&
+ convert(bankItem.getName()) + &,& + bankItem.getPrice()
+ &,& + bankItem.getNumber());
pw.close();
// 若输出信息含有特殊字符，处理csv 表格中特殊字符的方法
public String convert(String value) {
// 将value中& 换成&&
value = value.replace(&\&&, &\&\&&);
// 将回车换行符 换成换行符
value = value.replace(&\r\n&, &\n&);
// 如果存在, 只要在value 两端加入 &&
return &\&& + value + &\&&;
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~以上为核心代码~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：29959次
排名：千里之外
原创：63篇
转载：49篇
(5)(1)(6)(1)(20)(41)(37)(1)&&源码搜搜[中文]，大家一起找最好的开源代码。
&&请提交您认为需要收录的源码网站。
excel文件中的数据导出并显示Printing to Excel.zi - 不是我写的，用于将处数据导出为excel格式的文件，挺好用的。- Is not I writes, will use in place the data to derive will be the excel form document, very easy to use标签：Others, CSharp&评论：0条
delphi数据导出到excel数字大写转换标签：DELPHI, 字符处理类&评论：0条
SMExportv4.30.rar - SMExport实现dbgrid的数据导出为excel等多种格式。-SMExport achieve DBGrid data exported to a variety of formats, such as Excel标签：Borland C++ Builder, 数据库&评论：0条
内容索引:VB源码,报表打印,Excel VB将表格数据导出为EXCEL报表的格式，本示例使用了一个Msflexgrid控件(请在部件中选择)和类，编译和使用本程序的电脑上必须安装有EXCEL2003及以下版本（这个版本以上才会有微软Office编程支持库）。您可根据自己的需要对它进行修改完善，比如不显示EXCEL界面，直接将EXCEL文件保存到指定位置…… 源码爱好者编译注：标签：vb, Windows/VB6&评论：0条
数据导出：就是把数据存成CSV格式的Excel文件。数据回盘：就是把导出的CSV格式的文件编辑后，回盘更新内容。数据库采用的是Access标签：ASP, ACCESS/Excel&评论：0条
内容索引:VB源码,报表打印,Excel VB将数据导出到Excel表格文件中，在VB程序中，数据是以LIST列表的形式存在，导出为Excel表时，会对应每列每行的数据，程序原型是老外写的，经过了少量翻译，注意，在导出生成时，速度不是很快，导出的Excel文件可以用Excel2000及以上版本打开。标签：vb, Windows/VB6&评论：0条
DataGrid_To_EXCEL.ra - 利用VB将DataGrid中的数据导出到EXCEL表格中!-VB will use the data in the DataGrid Export to EXCEL table!标签：vb, 数据库&评论：0条
DBExport.rar - 数据导出到EXCEL文件等-data export to Excel documents, etc标签：C++, 数据结构&评论：0条
基于AVR的SD卡数据导出接口设计.pdf标签：解决方案&评论：0条
说明：实现如何进行数据导出标签：Visual Basic&评论：0条
exportandinport.rar - access数据库的导入和历史数据导出备份-access database, import and export of historical data backup标签：DELPHI, Delphi VCL&评论：0条
说明：前段时间,客户要求我们的系统可以实现与ms excel的数据交换,可以把系统中的数据导入导出到excel.我们的系统是一个用java做的b/s结构的MIS系统.为了解决这个问题,我采用了专门操作excel的开源项目jxl
根据客户的要求,用jxl实现了如下功能:
1:在客户端读取excel文件的数据
2:把系统数据导出到excel模板文件中.
标签：Java&评论：0条
unloader.zip - oracle数据导出脚本，个将整个数据的所有表导出为文本文件-oracle data export scripts, which will be the entire data of all forms of export text files标签：Others, Oracle&评论：0条
qexportfull.rar - 数据导出的VCL控件.-data derived VCL controls标签：DELPHI, Delphi VCL&评论：0条
说明：将sqlsever数据库内的数据导出为excel文件标签：Visual C++&评论：0条
内容索引:VB源码,报表打印,Listview,Excel VB将Listview数据输出到Excel表格的实例，用到了控件：MSCOMCTL.OCX和COMDLG32.OCX，仅供学习者参考一下。标签：vb, Access&评论：0条
地址，电话，地区，产品分类，星级，客户类型，操作员，编号等十项组合查询；４.跟踪记录查询（操作员拥有部分功能，管理员有全部功能；）客户维护记录集查询，方便管理层随时查看操作员的客户跟进情况；５.数据导出Excel（操作员拥有部分功能，管理员有全部功能；）根据操作员、客户类型、公司地址、部门等条件，导出.CSV为后缀的Excel格式文件，包括客户的所有信息；６.标签：ASP, Access&评论：0条
主要包括人事档案管理与查询、简历合同附件上传、照片管理、权限分配、数据导出、打印等功能。...26、车辆管理:主要基于单位车辆档案与维修、调度与状态查询、分配、费用统计、数据导出、打印、分类管理。所有车辆经过档案录入后即可进行车辆调度查询与分配，同时对**常维修记录与维修单及费用统一管理；同时支持车辆数据导出到Excel文件，按照部门对数据进行分类，支持在线打印等自动化处理。标签：办公 OA&评论：0条
说明：把gridview中的数据导出到Word,excel里标签：CSharp&评论：0条
DBExport(ADOBDE).Rar - 一个数据导出的应用实例,希望能供大家参考!-a data derived Application hope for your consideration!标签：DELPHI, 数据库&评论：0条
CopyRight (&)
All Rights Reserved&