写点什么

如何使用 JavaScript 实现在线 Excel 附件的上传与下载?

  • 2024-06-19
    福建
  • 本文字数:2040 字

    阅读完需:约 7 分钟

前言


在本地使用 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/


文章转载自:葡萄城技术团队

原文链接:https://www.cnblogs.com/powertoolsteam/p/18253730

体验地址:http://www.jnpfsoft.com/?from=infoq

用户头像

还未添加个人签名 2023-06-19 加入

还未添加个人简介

评论

发布
暂无评论
如何使用JavaScript实现在线Excel附件的上传与下载?_JavaScript_不在线第一只蜗牛_InfoQ写作社区