整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
preadJS ，作為一款基于 HTML5 的純前端電子表格控件，兼容 450 種以上的 Excel 公式，可為用戶帶來親切的 Excel 使用體驗，并可滿足企業IT部門 Web Excel 組件開發、數據填報、Excel 類報表設計、表格文檔協同編輯等業務場景。
離線填報，作為數據填報的典型應用場景之一，可以讓業務人員在生產環境中，隨時隨地隨心的完成填報工作，而不受限于網絡。
離線填報的一般實現流程是：
因為涉及到異步操作的過程，需要對離線填報人員做出權限控制，這個時候密碼保護就顯得尤為重要了。
SpreadJS作為一款在線Excel編輯控件，目前僅支持工作簿密碼保護，暫不支持工作表密碼保護功能。不過SpreadJS在設計之初，為了保持對Excel最大的兼容度，在將Excel的工作表導入時，密碼相關部分也會保存進SpreadJS的ssjson中,通過spread.toJSON() 的序列化之后，我們也可以正常使用密碼保護功能，序列化的Json文件如下圖所示：
上圖中紅框所示部分就是工作表的密碼保護以及設置的密碼字符串。
我們只要將這一部分保留，就可以在我們設計的Excel模板上添加對應的工作表保護。
請注意，由于Excel本身會將密碼進行一次加密，所以我們無法直接修改json中的對應的鍵值來更改成我們想要的明文密碼，所以我們需要預先導入一次我們設置好對應密碼的Excel，用來提取密碼的相關信息。
可以按照下面的演示進行操作：
1. 首先導入一個空Excel，給對應的工作表設置對應的密碼保護
2. 將該Excel導入到SpreadJS中，然后通過spread.toJSON()來獲取整個json，通過代碼找到對應的密碼保護相關設置：
var json = spread.toJSON()
var protectOptions = json.sheets.Sheet1.protectionOptions
這里由于Excel中默認是在Sheet1這個工作簿上設置的密碼保護，所以需要用json.sheets.Sheet1.protectionOptions來獲取對應的protectOptions設置，并將其暫時存儲在變量中以備后用。
3. 接下來我們正常設計填報模板。
填報模板的設計原理是相同的，但設計方法不同，尤其體現在桌面設計器和在線表格編輯器中，這一點需要注意。
填報模板的設計原理：將臨時保存的protectOptions merge到最終生成的ssjson中。（SpreadJS的ExcelIO導出Excel時需要使用spread序列化toJSON生成的ssjson，因此通過js操作，我們就可以將之前臨時保存的protectOptions merge進去。）
由于在設計表單保護時勾選的操作也會更改protectionOptions，如果單純替換就會導致設計模板時候設置的表單保護選項丟失，例如：我們在設計模板的時候勾選了調整行列大小，如下所示：
此時，protectOptions中會記錄
如果我們將之前臨時保存的protectOptions直接替換，那么上述設置就會丟失。
所以這里需要如下操作：
首先，將目前的protectOptions臨時保存：
var tempProtectOptions = json.sheets.Sheet1.protectionOptions然后，替換為之前帶有密碼的protectOptions：
json.sheets.Sheet1.protectionOptions = protectOptions之后，將tempProtectOptions里面的內容merge進去：
<div>json.sheets.Sheet1.protectionOptions.allowResizeRows = true;</div>
<div>json.sheets.Sheet1.protectionOptions.allowResizeColumns = true;</div>最后，將調整之后的ssjson交給ExcelIO進行導出：
<div>
<span style="color: rgb(51, 51, 51); font-family: monospace, monospace; font-size: 16px; white-space: pre; background-color: rgb(248, 248, 248);"> excelio.save(json, </span><span class="hljs-function" style="box-sizing: inherit; color: rgb(51, 51, 51); font-family: monospace, monospace; font-size: 16px; white-space: pre;"><span class="hljs-keyword" style="box-sizing: inherit; font-weight: 700;">function</span> (<span class="hljs-params" style="box-sizing: inherit;">blob</span>) </span><span style="color: rgb(51, 51, 51); font-family: monospace, monospace; font-size: 16px; white-space: pre; background-color: rgb(248, 248, 248);">{
</span><span style="color: rgb(51, 51, 51); font-family: monospace, monospace; font-size: 16px; white-space: pre; background-color: rgb(248, 248, 248);">
},
</span><span class="hljs-function" style="box-sizing: inherit; color: rgb(51, 51, 51); font-family: monospace, monospace; font-size: 16px; white-space: pre;"><span class="hljs-keyword" style="box-sizing: inherit; font-weight: 700;">function</span> (<span class="hljs-params" style="box-sizing: inherit;">e</span>) </span><span style="color: rgb(51, 51, 51); font-family: monospace, monospace; font-size: 16px; white-space: pre; background-color: rgb(248, 248, 248);">{</span><span style="color: rgb(51, 51, 51); font-family: monospace, monospace; font-size: 16px; white-space: pre; background-color: rgb(248, 248, 248);">
</span><span class="hljs-built_in" style="box-sizing: inherit; color: rgb(0, 134, 179); font-family: monospace, monospace; font-size: 16px; white-space: pre;">console</span><span style="color: rgb(51, 51, 51); font-family: monospace, monospace; font-size: 16px; white-space: pre; background-color: rgb(248, 248, 248);">.log(e);
});
</span>
</div>此時，導出的Excel中就會帶有密碼了，密碼就是之前導入Excel中設置的密碼，這樣在離線填報時候就可以控制填報人員的操作權限了，填報人員也無法對有密碼保護的文件進行修改。
以上，就是SpreadJS在離線填報的場景下，實現密碼權限控制的方法，您可以在 SpreadJS 的在線表格編輯器 完成密碼設置，并導入Excel中查看效果。
SpreadJS v13.2
SpreadJS 是一款基于 HTML5 的純前端電子表格控件，兼容 450 種以上的 Excel 公式，憑借其 “高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受以華為、蘇寧易購、天弘基金等為代表的企業用戶青睞。SpreadJS 為用戶帶來親切的 Excel 使用體驗的同時，滿足 Web Excel 組件開發、表格文檔協同編輯、數據填報、Excel 類報表設計等業務場景，極大降低了企業研發成本和項目交付風險。
本文轉載自葡萄城
點擊下方“了解更多”獲取更多界面開發教程！
<style>
.textVertical{
padding:5px 20px;
width:24px;
line-height:24px;
}
.backgroundImg{
background-image:url(bg.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
}
.trBackground{
background-image:url(bg.jpg);
background-repeat:no-repeat;
background-size:100% 60px;
}
</style>
<table border="1" width="600" cellspacing="10" cellpadding="10" bgcolor="#ffe4c4" align="center">
<caption>學籍表</caption>
<thead bgcolor="#f004c4">
<tr>
<th>姓名</th>
<th>性別</th>
<th>專業</th>
<th>輔導員</th>
</tr>
</thead>
<tr>
<td>吳杰</td>
<td>女</td>
<td>計算機網絡技術</td>
<td rowspan="2">劉凱</td>
</tr>
<tr>
<td>張力</td>
<td>男</td>
<td>計算機應用</td>
</tr>
</table>
ijmo是一款使用TypeScript編寫的新一代JavaScript/HTML5控件集。它秉承觸控優先的設計理念，在全球率先支持AngularJS，并提供性能卓越、零依賴的FlexGrid 和圖表等多個控件。
FlexSheet是一個快速輕量的控件，可以輕松導入電子表格、應用公式、格式化和凍結表格、格式化凍結的單元格、撤銷/重做以及導出數據到Excel。在web應用中使用FlexSheet能擁有與使用Excel相似的體驗。
下面來介紹FlexSheet的基本功能。
FlexSheet集中了Excel的主要特性：小型，快速和能擴展。這個理念促使我們在保證為您提供無限擴展可能的同時始終保持以HTML5和javascript為核心。
FlexSheet包含了內置公式的計算引擎，覆蓋了近100個公式，還能自動化完成。我們的公式結合了Microsoft Excel的操作，包括聚合操作、數學運算、邏輯和文本。
FlexSheet能夠導入已有的Excel電子表格，修改表格，和重新導出到Excel文件，它為用戶提供了一個靈活的跨應用的HTML5電子表格體驗。
從鍵盤導航到數據實體，FlexSheet 功能的設計就是為了讓用戶有熟悉的體驗。FlexSheet 的功能與Excel相似，這樣您就能跳過入門學習，從而提高生產效率，還能讓用戶有像回家的熟悉感覺。
FlexSheet不僅支持非綁定的數據，還支持數據綁定表格。在綁定模式下，列可以被定義和綁定數據，就像FlexGrid一樣。實際上，FlexSheet擴展了FlexGrid。在非綁定模式下，您可以通過編程在空表格里設置表格值。
AngularJS是現今最流行最強大的JavaScript應用框架。我們為我們的所有控件運送和維護AngularJS指令，包括大多數示例中都會用到的FlexSheet。
AngularJS FlexSheet指令讓您聲明創建與Excel類似的Angular電子表格， 所有的指令都是以標記的形式。當然，您也可以在其他框架中使用FlexSheet。
在應用程序中FlexSheet，能夠給用戶提供一個熟悉的強大的工具分析數據。
試用Wijmo，或了解金雞獻瑞ComponentOne全線產品7折迎春活動，請通過以下方式聯系我們：
微信：GrapeCityDT
郵件：marketing.xa@grapecity.com
官網：www.gcpowertools.com.cn
葡萄城是全球最大的控件提供商，世界領先的企業應用定制工具、企業報表和商業智能解決方案提供商，為超過75%的全球財富500強企業提供服務。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
