純前端表格控件SpreadJS，可滿足 .NET、Java、App 等應(yīng)用程序中的 Web Excel 組件開發(fā)、數(shù)據(jù)填報(bào)、在線文檔、圖表公式聯(lián)動(dòng)、類 Excel UI 設(shè)計(jì)等業(yè)務(wù)場(chǎng)景，并在數(shù)據(jù)可視化、Excel 導(dǎo)入導(dǎo)出、公式引用、數(shù)據(jù)綁定、框架集成中無需大量代碼開發(fā)和測(cè)試，極大降低了企業(yè)研發(fā)成本和項(xiàng)目交付風(fēng)險(xiǎn)。

點(diǎn)擊下載SpreadJS正式版

離線填報(bào)，作為數(shù)據(jù)填報(bào)的典型應(yīng)用場(chǎng)景之一，可以讓業(yè)務(wù)人員在生產(chǎn)環(huán)境中，隨時(shí)隨地隨心的完成填報(bào)工作，而不受限于網(wǎng)絡(luò)。

離線填報(bào)的一般實(shí)現(xiàn)流程是：

• 輸出HTML 離線報(bào)表
• 非網(wǎng)絡(luò)環(huán)境下進(jìn)行數(shù)據(jù)填報(bào)
• 聯(lián)網(wǎng)后，再進(jìn)行數(shù)據(jù)提交

因?yàn)樯婕暗疆惒讲僮鞯倪^程，需要對(duì)離線填報(bào)人員做出權(quán)限控制，這個(gè)時(shí)候密碼保護(hù)就顯得尤為重要了。

SpreadJS作為一款在線Excel編輯控件，目前僅支持工作簿密碼保護(hù)，暫不支持工作表密碼保護(hù)功能。不過SpreadJS在設(shè)計(jì)之初，為了保持對(duì)Excel最大的兼容度，在將Excel的工作表導(dǎo)入時(shí)，密碼相關(guān)部分也會(huì)保存進(jìn)SpreadJS的ssjson中,通過spread.toJSON() 的序列化之后，我們也可以正常使用密碼保護(hù)功能，序列化的Json文件如下圖所示：

上圖中紅框所示部分就是工作表的密碼保護(hù)以及設(shè)置的密碼字符串。

我們只要將這一部分保留，就可以在我們?cè)O(shè)計(jì)的Excel模板上添加對(duì)應(yīng)的工作表保護(hù)。

請(qǐng)注意，由于Excel本身會(huì)將密碼進(jìn)行一次加密，所以我們無法直接修改json中的對(duì)應(yīng)的鍵值來更改成我們想要的明文密碼，所以我們需要預(yù)先導(dǎo)入一次我們?cè)O(shè)置好對(duì)應(yīng)密碼的Excel，用來提取密碼的相關(guān)信息。

可以按照下面的演示進(jìn)行操作：

1、 首先導(dǎo)入一個(gè)空Excel，給對(duì)應(yīng)的工作表設(shè)置對(duì)應(yīng)的密碼保護(hù)

2、 將該Excel導(dǎo)入到SpreadJS中，然后通過spread.toJSON()來獲取整個(gè)json，通過代碼找到對(duì)應(yīng)的密碼保護(hù)相關(guān)設(shè)置：

var json = spread.toJSON()
var protectOptions = json.sheets.Sheet1.protectionOptions

這里由于Excel中默認(rèn)是在Sheet1這個(gè)工作簿上設(shè)置的密碼保護(hù)，所以需要用json.sheets.Sheet1.protectionOptions來獲取對(duì)應(yīng)的protectOptions設(shè)置，并將其暫時(shí)存儲(chǔ)在變量中以備后用。

3、 接下來我們正常設(shè)計(jì)填報(bào)模板。

填報(bào)模板的設(shè)計(jì)原理是相同的，但設(shè)計(jì)方法不同，尤其體現(xiàn)在桌面設(shè)計(jì)器和在線表格編輯器中，這一點(diǎn)需要注意。

填報(bào)模板的設(shè)計(jì)原理：將臨時(shí)保存的protectOptions merge到最終生成的ssjson中。（SpreadJS的ExcelIO導(dǎo)出Excel時(shí)需要使用spread序列化toJSON生成的ssjson，因此通過js操作，我們就可以將之前臨時(shí)保存的protectOptions merge進(jìn)去。）

由于在設(shè)計(jì)表單保護(hù)時(shí)勾選的操作也會(huì)更改protectionOptions，如果單純替換就會(huì)導(dǎo)致設(shè)計(jì)模板時(shí)候設(shè)置的表單保護(hù)選項(xiàng)丟失，例如：我們?cè)谠O(shè)計(jì)模板的時(shí)候勾選了調(diào)整行列大小，如下所示：

此時(shí)，protectOptions中會(huì)記錄

如果我們將之前臨時(shí)保存的protectOptions直接替換，那么上述設(shè)置就會(huì)丟失。

所以這里需要如下操作：

首先，將目前的protectOptions臨時(shí)保存：

var tempProtectOptions = json.sheets.Sheet1.protectionOptions

然后，替換為之前帶有密碼的protectOptions：

json.sheets.Sheet1.protectionOptions = protectOptions

之后，將tempProtectOptions里面的內(nèi)容merge進(jìn)去：

<div>json.sheets.Sheet1.protectionOptions.allowResizeRows = true;</div>
<div>json.sheets.Sheet1.protectionOptions.allowResizeColumns = true;</div>

最后，將調(diào)整之后的ssjson交給ExcelIO進(jìn)行導(dǎo)出：

<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>

此時(shí)，導(dǎo)出的Excel中就會(huì)帶有密碼了，密碼就是之前導(dǎo)入Excel中設(shè)置的密碼，這樣在離線填報(bào)時(shí)候就可以控制填報(bào)人員的操作權(quán)限了，填報(bào)人員也無法對(duì)有密碼保護(hù)的文件進(jìn)行修改。

以上，就是SpreadJS在離線填報(bào)的場(chǎng)景下，實(shí)現(xiàn)密碼權(quán)限控制的方法，您可以在SpreadJS 的在線表格編輯器 完成密碼設(shè)置，并導(dǎo)入Excel中查看效果?；蛘?a target="_blank">下載SpreadJS試用版免費(fèi)體驗(yàn)~了解更多請(qǐng)咨詢

相關(guān)內(nèi)容推薦：

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