基于jquery实现的web版excel

于jquery实现的web版excel。包含excel的基本功能

支持合并单元格，拆分单元格
支持插入单元格，删除单元格
支持整行整列选择单元格
自定义右键菜单，可以设置单元格数量
支持鼠标左键拖动调整单元格宽高
支持选中单元格输入文字，多个单元格设置字体，颜色，单元格背景色，水平位置，垂直位置，字体粗细，斜体，字体大小等样式
单元格设置自动换行功能，默认为超出部分显示省略号
支持表结构修改的撤回功能（待完善）
支持单个单元格的样式复制
支持选中单元格，鼠标左键选中复制。复制支持有规律的数字计算（等差数列）
支持设置单元格线条样式，颜色
选中单元格可以根据上下左右键来进行移动选择，回车键默认与右键功能相同
支持保存excel的HTML结构和将保存的excel结构代码展示出来继续编辑

软件架构

使用jquery制作，其中使用了font-awesome作为字体图标

安装教程

下载后直接打开index.html运行即可

界面展示

、前端实现pdf文件在线预览功能

方式一、pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面。在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览

<a href="文档地址"></a>

方式二、通过jquery插件jquery.media.js实现这个插件可以实现pdf预览功能（包括其他各种媒体文件）但是对word等类型的文件无能为力。实现方式： js代码：

<script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="jquery.media.js"></script>
复制代码

html结构：

 <body>
 <div id="handout_wrap_inner"></div>
 </body>
复制代码

调用方式：

<script type="text/javascript"> 
 $('#handout_wrap_inner').media({
		width: '100%',
		height: '100%',
		autoplay: true,
 src:'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
 }); 
</script>
复制代码

方式三、直接通过页面内嵌iframe

$("<iframe src='"+ this.previewUrl +"' width='100%' height='362px' frameborder='1'>").appendTo($(".video-handouts-preview"));
复制代码

此外还可以在iframe标签之间提供一个提示类似这样

<iframe :src="previewUrl" width="100%" height="100%">
This browser does not support PDFs. Please download the PDF to view it: <a :href="previewUrl">Download PDF</a>
</iframe>
复制代码

方式四、通过标签嵌入内容

<embed :src="previewUrl" type="application/pdf" width="100%" height="100%">

此标签h5特性中包含四个属性：高、宽、类型、预览文件src！与< iframe > < / iframe > 不同，这个标签是自闭合的的，也就是说如果浏览器不支持PDF的嵌入，那么这个标签的内容什么都看不到！

方式五、标签和iframe使用差别较小

<object :src="previewUrl" width="100%" height="100%">
This browser does not support PDFs. Please download the PDF to view it: <a :href="previewUrl">Download PDF</a>
</object>
复制代码

除方式二以外其他都是直接通过标签将内容引入页面实现预览

方式六、PDFObject

PDFObject实际上也是通过标签实现的直接上代码

<!DOCTYPE html>
<html>
<head>
 <title>Show PDF</title>
 <meta charset="utf-8" />
 <script type="text/javascript" src='pdfobject.min.js'></script>
 <style type="text/css">
 html,body,#pdf_viewer{
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 }
 </style>
</head>
<body>
 <div id="pdf_viewer"></div>
</body>
<script type="text/javascript">
 if(PDFObject.supportsPDFs){
 // PDF嵌入到网页
 PDFObject.embed("index.pdf", "#pdf_viewer" );
 } else {
 location.href="/canvas";
 }
</script>
</html>

还可以通过以下代码进行判断是否支持PDFObject预览

if(PDFObject.supportsPDFs){
 console.log("Yay, this browser supports inline PDFs.");
} else {
 console.log("Boo, inline PDFs are not supported by this browser");
}
复制代码

方式七、PDF.js

PDF.js可以实现在html下直接浏览pdf文档，是一款开源的pdf文档读取解析插件，非常强大，能将PDF文件渲染成Canvas。PDF.js主要包含两个库文件，一个pdf.js和一个pdf.worker.js，一个负责API解析，一个负责核心解析。

2、word、xls、ppt文件在线预览功能

word、ppt、xls文件实现在线预览的方式比较简单可以直接通过调用微软的在线预览功能实现 (预览前提：资源必须是公共可访问的)

<iframe src='https://view.officeapps.live.com/op/view.aspx?src=http://storage.xuetangx.com/public_assets/xuetangx/PDF/1.xls' width='100%' height='100%' frameborder='1'>
			</iframe>
复制代码

src就是要实现预览的文件地址具体文档看这微软接口文档

补充：google的文档在线预览实现同微软（资源必须是公共可访问的）

<iframe :src="'https://docs.google.com/viewer?url="fileurl"></iframe>
复制代码

3、word文件

XDOC可以实现预览以DataURI表示的DOC文档，此外XDOC还可以实现文本、带参数文本、html文本、json文本、公文等在线预览，具体实现方法请看官方文档

下面这种方式可以实现快速预览word但是对文件使用的编辑器可能会有一些限制

<a href="http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=http://www.xdocin.com/demo/demo.docx" target="_blank" rel="nofollow">XDOC</a>
复制代码

4、excel文件

目前excel文件已经有了类似pdf.js那样的解析sheet.js

总结：

1、免费纯前端方式实现在线预览word、excel、ppt最优选择微软在线预览（不可编辑）

2、利用后端将文件转为图片，前端以图片形式预览（可行方案）

3、购买在线预览服务例如百度DOC文档服务、永中、I DOC VIEW等

著名：文章内容是从网上搜集资料所得；在次发表只为自己以及头条程序员兄弟日后使用图个方便。

觉得有用记得收藏转发！

击“了解更多”获取Kendo UI for jQuery R2 2020 SP1试用版下载

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。

从Kendo UI Q3 2014（2014.3.1119）版本开始，Grid小部件提供内置的Excel导出功能。

导出从左到右的内容

excelExport事件允许您反转单元格并设置文本对齐方式，支持从右到左（RTL）语言。要在Excel中从右到左的流程中呈现文档，请启用工作簿的rtl选项。

每行都有一个类型字段，可用于在网格中区分各种行类型。支持的值为：

"header"
"footer"
"group-header"
"group-footer"
"data"<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script> <div class="k-rtl"> <div id="grid" ></div> </div> <script> $("#grid").kendoGrid({ toolbar: ["excel"], excel: { allPages: true }, dataSource: { type: "odata", transport: { read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products" }, pageSize: 7 }, excelExport: function(e) { var workbook=e.workbook; var sheet=workbook.sheets[0]; workbook.rtl=true; for (var i=0; i < sheet.rows.length; i++) { for (var ci=0; ci < sheet.rows[i].cells.length; ci++) { sheet.rows[i].cells[ci].hAlign="right"; } } }, pageable: true, columns: [ { width: 300, field: "ProductName", title: "Product Name" }, { field: "UnitsOnOrder", title: "Units On Order" }, { field: "UnitsInStock", title: "Units In Stock" } ] }); </script>

导出多个网格

默认情况下，每个网格将其内容导出到单独的Excel工作表中。

在服务器上保存文件

要将生成的文件发送到远程服务，请防止保存默认文件并发布base64编码的内容。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
toolbar: ["excel"],
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
pageSize: 7
},
pageable: true,
columns: [
{ width: 300, field: "ProductName", title: "Product Name" },
{ field: "UnitsOnOrder", title: "Units On Order" },
{ field: "UnitsInStock", title: "Units In Stock" }
],
excelExport: function(e) {
// Prevent the default behavior which will prompt the user to save the generated file.
e.preventDefault();
// Get the Excel file as a data URL.
var dataURL=new kendo.ooxml.Workbook(e.workbook).toDataURL();
// Strip the data URL prologue.
var base64=dataURL.split(";base64,")[1];
// Post the base64 encoded content to the server which can save it.
$.post("/server/save", {
base64: base64,
fileName: "ExcelExport.xlsx"
});
}
});
</script>

服务器端处理

要将庞大的数据集导出到Excel，请使用新的RadSpreadStreamProcessing库，该库是Telerik Document Processing (TDP) by Progress的一部分。

已知局限性

在客户端导出期间，网格及其数据源仅包含当前页面中的数据项。结果，要么批量导出，要么禁用分页功能。
导出文件的最大大小具有系统特定的限制。对于大型数据集，请使用RadSpreadStreamProcessing作为文档处理库的一部分提供的服务器端解决方案。
在较旧的浏览器（例如Internet Explorer 9和Safari）中，将网格导出到Excel需要实现服务器代理。
在Excel导出期间，网格不使用列模板，而是仅导出数据。出现这种情况的原因是，列模板可能包含无法转换为Excel列值的任意HTML。
网格出于与未导出列模板相同的原因而不会导出其详细信息模板。
在Excel导出期间，网格不使用列格式，因为某些Kendo UI格式与Excel不兼容。要格式化单元格值，请设置单元格的格式选项。

在线咨询

上一篇：油猴脚本分享系列：第二篇 - HTML5视频播放器增
下一篇：javascript中如何解决精度丢失问题

您的项目需求

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