摘要：本文由葡萄城技術團隊于CSDN原創并首發。轉載請注明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。

前言

在本地使用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 在線報表設計