摘要：本文由葡萄城技术团队于思否原创并首发。转载请注明出处：葡萄城官网，葡萄城为开发者提供业余的开发工具、解决方案和服务，赋能开发者。
前言
在本地应用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 在线报表设计
发表回复