最新技術資源（建議收藏）
https://www.grapecity.com.cn/resources/
前言
在本地使用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/
擴充套件連結：
Spring Boot框架下實現Excel服務端匯入匯出
專案實戰：線上報價採購系統（React +SpreadJS+Echarts）
Svelte 框架結合 SpreadJS 實現純前端類 Excel 線上報表設計