JS實現(xiàn)在線Excel的附件上傳與下載

更新時間：2023年08月16日 08:58:17 作者：葡萄城官網(wǎng)

在本地使用Excel時，經(jīng)常會有需要在Excel中添加一些附件文件的需求，今天小編將為大家介紹如何使用前端HTML+JS+CSS技術通過超鏈接單元格的形式實現(xiàn)在線Excel附件上傳、下載和修改的操作，需要的可以參考下

前言

在本地使用Excel時，經(jīng)常會有需要在Excel中添加一些附件文件的需求，例如在Excel中附帶一些Word，CAD圖等等。同樣的，類比到Web端，現(xiàn)在很多人用的在線Excel是否也可以像本地一樣實現(xiàn)附件文件的操作呢？答案是肯定的，不過和本地不同的是，Web端不會直接打開附件，而是使用超鏈接單元格的形式來顯示，今天小編將為大家介紹使用前端HTML+JS+CSS技術通過超鏈接單元格的形式實現(xiàn)在線Excel附件上傳、下載和修改的操作。

使用JS實現(xiàn)附件上傳

實現(xiàn)的方式分為四個步驟：

1.創(chuàng)建前端頁面

2編寫暫存附件信息的方法

3.編寫附件文件清除的方法

4.編寫文件保存和文件加載的方法

1.創(chuàng)建前端頁面

核心代碼：

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

點擊上傳附件按鈕可以把附件上傳到對應的單元格，清除附件會清理掉所有已經(jīng)上傳過的附件信息，打包下載會對所有的附件進行統(tǒng)一下載。

2.暫存附件信息方法

這一步起始主要用來設置文件上傳之后單元格超鏈接及tag信息。細心的同學會注意到，這里我注冊了一個命令，超鏈接本身會有一個跳轉的行為，寫command之后，會阻止這個默認跳轉，轉去執(zhí)行對應的命令。注冊的命令主要就是用來做附件文件的下載。

核心代碼：

function hasAttachFile(sheet,row,col,file){
/*
附件文件暫存
這里由于沒有服務端，所以我直接存了File對象,但File對象只有在實際使用時才會去獲取實際的文件內(nèi)容。在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應該是上傳到文件服務器上的文件訪問地址。
         * 因此這里需要發(fā)送請求，先獲取文件blob,將獲取的blob傳遞到saveAs的第二個參數(shù)中。
         */
         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)
}