JS实现在线Excel的附件上传与下载

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

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);
}

// 下载文件
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)
        }
    }
})

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

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