純前端表格控件SpreadJS，可滿足 .NET、Java、App 等應用程序中的 Web Excel 組件開發、數據填報、在線文檔、圖表公式聯動、類 Excel UI 設計等業務場景，并在數據可視化、Excel 導入導出、公式引用、數據綁定、框架集成中無需大量代碼開發和測試，極大降低了企業研發成本和項目交付風險。

點擊下載SpreadJS正式版

離線填報，作為數據填報的典型應用場景之一，可以讓業務人員在生產環境中，隨時隨地隨心的完成填報工作，而不受限于網絡。

離線填報的一般實現流程是：

• 輸出HTML 離線報表
• 非網絡環境下進行數據填報
• 聯網后，再進行數據提交

因為涉及到異步操作的過程，需要對離線填報人員做出權限控制，這個時候密碼保護就顯得尤為重要了。

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試用版免費體驗~了解更多請咨詢

相關內容推薦：

純前端表格控件SpreadJS使用教程：表格綁定如何綁定多層表頭