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

摘要：本文由葡萄城技术团队于博客园原创并首发。转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

前言

在本地使用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 在线报表设计