如何在web页面打开excel
web直接打开一个excel文档并可以使用方法如下：
安装Office以后，有一个ActiveX控件被安
装到了系统中，这个控件位于“Program Files\Microsoft
Office\OFFICE11\owssupp.dll”。通过这个控件，客户端页面上的java
script就可以激活本地的Office软件，来实现打开、编辑Office(Word,Excel)文档。（另，Office
XP应该就已经包含这个ActiveX控件了。）
首先，用Script创建一个本地的对象：
openDocObj = new ActiveXObject("SharePoint.OpenDocuments.2"); // 为了兼容Office XP，可以创建“SharePoint.OpenDocuments.1”
然后，调用openDocObj的相应的方法。比如打开服务器上的一个Office文档：
openDocObj.ViewDocument("http://www.dzwebs.net/sample.doc");
openDocObj对象会根据参数中不同的Office文档类型（.doc、.xls、.ppt）来打开不同的程序（Word、Excel、PowerPoint）。ViewDocument()方法还有一个重载签名，可以让我们手工指定激活哪个程序来打开文档：
openDocObj.ViewDocument("http://www.dzwebs.net/sample.doc", 要激活的程序的ProgID);
那么要打开Office程序在线编辑文件又如何？
openDocObj.EditDocument("http://www.dzwebs.net/sample.doc");
就
可以直接激活Word，在Word里面编辑文档，然后直接点击Word里面的保存功能，就可以将文件保存会服务器上了。注意：为了让Word能将编辑后的
文档直接保存会服务器，访问Web站点的当前上下文的Windows
Identity必须对服务器的相应目录（即“http://www.abc.com/documents”这个虚拟目录所对应的服务器上的物理路径）有
相应的写权限，否则保存动作会失败。编辑完成后，EditDocument()会返回一个bool值，来反映编辑操作是否成功。
我们还可以通过打开服务器上的一个文档模版，来创建一个新的文档：
openDocObj.CreateNewDocument("http://www.dzwebs.net/sampleTemplate.dot", "http://www.dzwebs.net/documents/");
就
可以使用“http://www.dzwebs.net/sampleTemplate.dot”这个模版来创建一个新的文档，默认新文档的保存地点是
“http://www.dzwebs.net/documents/”。创建新文档时使用的程序取决于模版文件的类型（比如.dot模版会对应
Word）。新文档的保存同样需要注意权限问题。CreateNewDocument()方法同样会返回一个bool值来反映操作是否成功。
CreateNewDocument()方法的第一个参数，除了可以使用一个模版的地址外，还可以直接指定为希望用来创建新文档的客户端程序的ProgID。
应用实例：
<Script Language="java script">
function OpenWord()
{
var openDocObj;
openDocObj = new ActiveXObject("SharePoint.OpenDocuments.1");
openDocObj.ViewDocument("http://www.dzwebs.net/document/shouce.doc");
}
</script>
<input type="button" name="button" value="shouce" onclick="OpenWord()">
webexcel
介绍
jExcel是一个轻量级的原生javascript插件，用于创建与Excel或任何其他电子表格软件兼容的基于Web的交互式表格和电子表格。可以从JS数组，JSON，CSV或XSLX文件创建在线电子表格表。可以从excel复制并直接粘贴到jExcel电子表格，反之亦然。集成任何第三方javascript插件非常容易，可以创建自己的自定义列，自定义编辑器，并在应用程序中自定义任何功能。jExcel通过其原生列类型提供了大量不同的输入选项，以涵盖最常见的基于Web的应用程序需求。它是Web数据管理的完整解决方案。使用jExcel javascript电子表格创建出色的应用程序。
Web端如此强大的电子表格Excel插件，轻松进行数据处理――jExcel
主要优点
制作丰富且用户友好的Web界面和应用程序
可以使用用户的方式轻松处理复杂的数据输入。
改善用户软件体验
创建丰富的CRUDS和漂亮的UI
与excel的兼容性：用户可以使用常见的复制和粘贴快捷方式移动数据
通过简单的第三方插件集成轻松进行自定义
精益，快速且易于使用
成千上万的成功用户案例
加快处理基于Web的软件中的复杂数据输入的工作
安装使用
npm install jexcel简单示例
将javascript电子表格集成到站中，创建您的第一个在线电子表格的基本示例：
1、首先引入相关js和css文件
<script src="./jexcel/v3/jexcel.js"</script<script src="./jsuites/v2/jsuites.js"</script
2、定义一个基于div的容器并编写js
Web端如此强大的电子表格Excel插件，轻松进行数据处理――jExcel
<script
data = [
["苹果", 0, 1],
["草莓", 1, 2],
["西瓜", 2, 3]
];
jexcel(document.getElementById("mytable"), {
data: data,
colWidths: [300, 80, 100]
});
</script
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
color
var 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插件，轻松进行数据处理――jExcel
jexcel(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
