整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
于jquery實現的web版excel。包含excel的基本功能
軟件架構
使用jquery制作，其中使用了font-awesome作為字體圖標
安裝教程
下載后直接打開index.html運行即可
界面展示
方式一、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解析，一個負責核心解析。
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 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選項。
每行都有一個類型字段，可用于在網格中區分各種行類型。 支持的值為：
導出多個網格
默認情況下，每個網格將其內容導出到單獨的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的一部分。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
