摘要：本文由葡萄城技術團隊於OSCHINA原創並首發。轉載請註明出處：葡萄城官網，葡萄城爲開發者提供專業的開發工具、解決方案和服務，賦能開發者。
前言
在本地使用Excel時，經常會有需要在Excel中添加一些附件文件的需求，例如在Excel中附帶一些Word，CAD圖等等。同樣的，類比到Web端，現在很多人用的在線Excel是否也可以像本地一樣實現附件文件的操作呢？答案是肯定的，不過和本地不同的是，Web端不會直接打開附件，而是使用超鏈接單元格的形式來顯示，今天小編將爲大家介紹使用前端HTML+JS+CSS技術通過超鏈接單元格的形式實現在線Excel附件上傳、下載和修改的操作。
使用JS實現附件上傳
實現的方式分爲四個步驟：
1.創建前端頁面
2編寫暫存附件信息的方法
3.編寫附件文件清除的方法
4.編寫文件保存和文件加載的方法
1.創建前端頁面
核心代碼：
<div style="margin-bottom: 8px">
<button id="uploadAttach">上傳附件</button>
<button id="removeAttach">清除附件</button>
<button id="fileSaver">文件保存</button>
<button id="loadSubmitFile">加載文件</button>
<button id="loadPackage">打包下載</button>
</div>
<div id="fileOperate" style="visibility: hidden;position: absolute;top: 100px;left: 300px;z-index: 10; background-color: #eee;padding: 16px">
<label for="choseFile">選擇文件\</label>
<input type="file" id="choseFile" name="choseFile"/>
<button id="submit">提交</button>
<button id="cancel">取消</button>
</div>
點擊上傳附件按鈕可以把附件上傳到對應的單元格，清除附件會清理掉所有已經上傳過的附件信息，打包下載會對所有的附件進行統一下載。
2.暫存附件信息方法
這一步起始主要用來設置文件上傳之後單元格超鏈接及tag信息。細心的同學會注意到，這裏我註冊了一個命令，超鏈接本身會有一個跳轉的行爲，寫command之後，會阻止這個默認跳轉，轉去執行對應的命令。註冊的命令主要就是用來做附件文件的下載。
核心代碼：
function hasAttachFile(sheet,row,col,file){
\*\*
\* 附件文件暫存
\* 這裏由於沒有服務端，所以我直接存了File對象,但File對象只有在實際使用時纔會去獲取實際的文件內容。在demo中可行
\* 在實際項目中，需要將file對象上傳到文件服務器中
\* 上傳完成後tag中的fileInfo應該代表的是文件的訪問地址，而不能再是File對象。
\*
sheet.setValue(row,col,file.name)
sheet.setTag(row,col,{
type: hyerlinkType,
fileInfo: file // 實際項目中fileInfo應該爲上傳完成文件的訪問路徑
})
sheet.setHyperlink(row, col, {
url: file.name,
linkColor: '#0066cc',
visitedLinkColor: '#3399ff',
drawUnderline: true,
command:'downloadAttachFile',
}, GC.Spread.Sheets.SheetArea.viewport);
}
在這裏，我引入了三方組件庫FileSaver，在點擊超鏈接單元格時，可以支持當前附件文件的下載。
// 下載文件
spread.commandManager().register("downloadAttachFile",{
canUndo: false,
execute: function(context,options,isUndo){
let sheet = context.getActiveSheet()
let row = sheet.getActiveRowIndex()
let col = sheet.getActiveColumnIndex()
let cellTag = sheet.getTag(row,col)
console.log(sheet,row,col,cellTag)
if(cellTag && cellTag.type==hyerlinkType){
\*\*\*
\* 純前端demo，文件存在於本地，fileInfo中存儲的是File對象，可以直接獲取到文件
\* 實際項目中，fileInfo應該是上傳到文件服務器上的文件訪問地址。
\* 因此這裏需要發送請求，先獲取文件blob,將獲取的blob傳遞到saveAs的第二個參數中。
\*
saveAs(cellTag.fileInfo,cellTag.fileInfo.name)
}
}
})
3. 附件文件清除
document.getElementById("removeAttach").onclick = function(){
\*\*\*
\* 清除附件
\* 清除附件需要先刪除遠程文件服務器的文件，之後清除單元格的Tag信息。
\* 這裏前端演示demo，只刪除了tag。
\* 實際項目中tag中的fileInfo應該是文件上傳後的路徑
\*
let sheet = spread.getActiveSheet()
let row = sheet.getActiveRowIndex()
let col = sheet.getActiveColumnIndex()
spread.commandManager().execute({
cmd:"removeAttachFile",
sheet,row,col
})
}
4. 文件保存/加載
將文件保存成爲JSON結構：
document.getElementById("fileSaver").onclick = function(){
// 保存文件
submitFile = spread.toJSON()
spread.clearSheets()
spread.addSheet(0)
}
加載已保存文件：
document.getElementById("loadSubmitFile").onclick = function(){
// 加載已保存文件
spread.fromJSON(submitFile)
}
實現功能和效果：
在需要在某個單元格中上傳附件時，我們可以彈出一個模態框，在模態框中上傳文件，點擊提交之後，可以對文件做一個暫存，將文件信息存儲在單元格的Tag中，點擊單元格可以下載文件。
完整代碼和在線Demo地址：
https://jscodemine.grapecity.com/share/VHlpNyuP-0CIBNleP5jtyA/ 
擴展鏈接：