快捷導(dǎo)航

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

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

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

前言

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

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

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

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

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

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

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

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

核心代碼：

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

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

2.暫存附件信息方法

這一步起始主要用來(lái)設(shè)置文件上傳之后單元格超鏈接及tag信息。細(xì)心的同學(xué)會(huì)注意到，這里我注冊(cè)了一個(gè)命令，超鏈接本身會(huì)有一個(gè)跳轉(zhuǎn)的行為，寫command之后，會(huì)阻止這個(gè)默認(rèn)跳轉(zhuǎn)，轉(zhuǎn)去執(zhí)行對(duì)應(yīng)的命令。注冊(cè)的命令主要就是用來(lái)做附件文件的下載。

核心代碼：

function hasAttachFile(sheet,row,col,file){
/*
附件文件暫存
這里由于沒(méi)有服務(wù)端，所以我直接存了File對(duì)象,但File對(duì)象只有在實(shí)際使用時(shí)才會(huì)去獲取實(shí)際的文件內(nèi)容。在demo中可行
在實(shí)際項(xiàng)目中，需要將file對(duì)象上傳到文件服務(wù)器中
上傳完成后tag中的fileInfo應(yīng)該代表的是文件的訪問(wèn)地址，而不能再是File對(duì)象。
*/
    sheet.setValue(row,col,file.name)
    sheet.setTag(row,col,{
        type: hyerlinkType,
        fileInfo: file // 實(shí)際項(xiàng)目中fileInfo應(yīng)該為上傳完成文件的訪問(wèn)路徑
        })
        sheet.setHyperlink(row, col, {
            url: file.name,
            linkColor: '#0066cc',
            visitedLinkColor: '#3399ff',
            drawUnderline: true,
            command:'downloadAttachFile',
        }, GC.Spread.Sheets.SheetArea.viewport);
}

在這里，我引入了三方組件庫(kù)FileSaver，在點(diǎn)擊超鏈接單元格時(shí)，可以支持當(dāng)前附件文件的下載。

// 下載文件
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中存儲(chǔ)的是File對(duì)象，可以直接獲取到文件
         * 實(shí)際項(xiàng)目中，fileInfo應(yīng)該是上傳到文件服務(wù)器上的文件訪問(wèn)地址。
         * 因此這里需要發(fā)送請(qǐng)求，先獲取文件blob,將獲取的blob傳遞到saveAs的第二個(gè)參數(shù)中。
         */
         saveAs(cellTag.fileInfo,cellTag.fileInfo.name)
        }
    }
})

3. 附件文件清除

document.getElementById("removeAttach").onclick = function(){
/**
* 清除附件
* 清除附件需要先刪除遠(yuǎn)程文件服務(wù)器的文件，之后清除單元格的Tag信息。
* 這里前端演示demo，只刪除了tag。
* 實(shí)際項(xiàng)目中tag中的fileInfo應(yīng)該是文件上傳后的路徑
*/
let sheet = spread.getActiveSheet()
let row = sheet.getActiveRowIndex()
let col = sheet.getActiveColumnIndex()
spread.commandManager().execute({
    cmd:"removeAttachFile",
    sheet,row,col
})
}

4. 文件保存/加載

將文件保存成為JSON結(jié)構(gòu)：

document.getElementById("fileSaver").onclick = function(){
// 保存文件
submitFile = spread.toJSON()
spread.clearSheets()
spread.addSheet(0)
}
加載已保存文件：
document.getElementById("loadSubmitFile").onclick = function(){
// 加載已保存文件
spread.fromJSON(submitFile)
}