介绍

jExcel是一个轻量级的原生javascript插件，用于创建与Excel或任何其他电子表格软件兼容的基于Web的交互式表格和电子表格。可以从JS数组，JSON，CSV或XSLX文件创建在线电子表格表。可以从excel复制并直接粘贴到jExcel电子表格，反之亦然。集成任何第三方javascript插件非常容易，可以创建自己的自定义列，自定义编辑器，并在应用程序中自定义任何功能。jExcel通过其原生列类型提供了大量不同的输入选项，以涵盖最常见的基于Web的应用程序需求。它是Web数据管理的完整解决方案。使用jExcel javascript电子表格创建出色的应用程序。

Web端如此强大的电子表格Excel插件，轻松进行数据处理——jExcel

开源地址https://github.com/paulhodel/jexcel

主要优点制作丰富且用户友好的Web界面和应用程序

可以使用用户的方式轻松处理复杂的数据输入。

改善用户软件体验

创建丰富的CRUDS和漂亮的UI

与excel的兼容性：用户可以使用常见的复制和粘贴快捷方式移动数据

通过简单的第三方插件集成轻松进行自定义

精益，快速且易于使用

成千上万的成功用户案例

加快处理基于Web的软件中的复杂数据输入的工作

安装使用npm install jexcel简单示例

将javascript电子表格集成到站中，创建您的第一个在线电子表格的基本示例：

1、首先引入相关js和css文件

2、定义一个基于div的容器并编写js

Web端如此强大的电子表格Excel插件，轻松进行数据处理——jExcel

data = [

["苹果", 0, 1],

["草莓", 1, 2],

["西瓜", 2, 3]

];

jexcel(document.getElementById("mytable"), {

data: data,

colWidths: [300, 80, 100]

});

3、打开浏览器查看效果

就这么几句简单的代码就像打开了一个无限简化的Excel一般

Web端如此强大的电子表格Excel插件，轻松进行数据处理——jExcel

查看DEMO

Github上提供了相关Demo，我们一起来看一看都有哪些搜索和分页jexcel(document.getElementById("spreadsheet"), {

csv:"https://bossanova.uk/jexcel/v3/demo.csv",

csvHeaders:true,

search:true,

pagination:10,

columns: [

{ type:"text", width:300 },

{ type:"text", width:200 },

{ type:"text", width:100 },

{ type:"text", width:100 },

{ type:"text", width:100 },

]

});

Web端如此强大的电子表格Excel插件，轻松进行数据处理——jExcel列类型支持text

numeric

hidden

dropdown

autocomplete

checkbox

radio

calendar

image

colorvar data = [

["Jazz", "Honda", "2019-02-12", "", true, "$ 2.000,00", "#777700"],

["Civic", "Honda", "2018-07-11", "", true, "$ 4.000,01", "#007777"],

];

jexcel(document.getElementById("spreadsheet"), {

data:data,

columns: [

{ type: "text", title:"Car", width:120 },

{ type: "dropdown", title:"Make", width:200, source:[ "Alfa Romeo", "Audi", "Bmw" ] },

{ type: "calendar", title:"Available", width:200 },

{ type: "image", title:"Photo", width:120 },

{ type: "checkbox", title:"Stock", width:80 },

{ type: "numeric", title:"Price", width:100, mask:"$ #.##,00", decimal:"," },

{ type: "color", width:100, render:"square", }

]

});

Web端如此强大的电子表格Excel插件，轻松进行数据处理——jExcel下拉框var data = [

["US", "Wholemeal", "Yes", "2019-02-12"],

["CA;US;UK", "Breakfast Cereals", "Yes", "2019-03-01"],

["CA;BR", "Grains", "No", "2018-11-10"],

["BR", "Pasta", "Yes", "2019-01-12"],

];

jexcel(document.getElementById("spreadsheet"), {

data:data,

columns: [

{ type:"dropdown", width:"300", title:"Product Origin", url:"/jexcel/countries", autocomplete:true, multiple:true },

{ type:"text", width:"200", title:"Description" },

{ type:"dropdown", width:"100", title:"Stock", source:["No","Yes"] },

{ type:"calendar", width:"100", title:"Best before" },

]

});

Web端如此强大的电子表格Excel插件，轻松进行数据处理——jExcel日期时间选择框var data = [

["Flag Fen", "South East", "2019-01-01"],

["Bristol Aero Collection (BAC)","South West","2019-04-03"],

["Experience Barnsley", "North","2018-12-03"],

["Cinema Museum", "London",""],

["University of Hertfordshire Art Collection", "South East",""],

["LUX London", "London","2016-11-03"],

];

jexcel(document.getElementById("spreadsheet"), {

data:data,

columns: [

{

type:"text",

title:"Museum",

width:"300",

},

{

type:"dropdown",

title:"Region",

source:["South East","South West","North","London"],

width:"200",

},

{

type:"calendar",

title:"Last visit",

options: { format:"DD/MM/YYYY" },

width:"100",

},

]

});

Web端如此强大的电子表格Excel插件，轻松进行数据处理——jExcel上传图片到表格

Web端如此强大的电子表格Excel插件，轻松进行数据处理——jExceljexcel(document.getElementById("spreadsheet"), {

data:data,

columns: [

{ type:"text", width:300, title:"Title" },

{ type:"image", width:120, title:"Cover" },

]

});

Web端如此强大的电子表格Excel插件，轻松进行数据处理——jExcel表格操作

插入，移除和移动列和行，这块就是表格的相关操作了，都可以通过相关API实现

Web端如此强大的电子表格Excel插件，轻松进行数据处理——jExcel表头

jExcel电子表格使用指令nestedHeadrs本机实现嵌套头文件，如下面的示例所示。

Web端如此强大的电子表格Excel插件，轻松进行数据处理——jExcel导出

导出非常简单，就调用一个方法mySpreadsheet = jexcel(document.getElementById("spreadsheet1"), {

csv:"https://bossanova.uk/jexcel/v3/demo.csv",

csvHeaders:true,

columns: [

{ type:"text", width:70 },

{ type:"text", width:200 },

{ type:"text", width:300 },

]

});

document.getElementById("download").onclick = function () {

mySpreadsheet.download();

}

Web端如此强大的电子表格Excel插件，轻松进行数据处理——jExcel

Web端如此强大的电子表格Excel插件，轻松进行数据处理——jExcel

由于相关示例比较丰富，包括合并单元格、懒加载等丰富的功能等再此就不在展示，已经对它感兴趣的小伙伴不妨直接去体验下，就能感受到它的强悍了！并且还提供了包括React、Vue、jQuery等在内的相关实现，这样你就可以更好的集成到你的相关项目中去了，非常的人性化！

总结

jExcel是一个非常简单而且功能丰富的Web端JavaScript电子表格，就和名字一样，就如同是Web端的Excel，相当于是Excel的表格模块，无论是处理数据还是用户操作比普通的HTML表格强上无数倍，相信已经有小伙伴想去尝试一番了，赶紧试试吧！希望对你有所帮助！

Web端如此强大的电子表格Excel插件，轻松进行数据处理——jExcel