如何使用 JavaScript 实现在线 Excel 附件的上传与下载?
前言
在本地使用 Excel 时,经常会有需要在 Excel 中添加一些附件文件的需求,例如在 Excel 中附带一些 Word,CAD 图等等。同样的,类比到 Web 端,现在很多人用的在线 Excel 是否也可以像本地一样实现附件文件的操作呢?答案是肯定的,不过和本地不同的是,Web 端不会直接打开附件,而是使用超链接单元格的形式来显示,今天小编将为大家介绍使用前端 HTML+JS+CSS 技术通过超链接单元格的形式实现在线 Excel 附件上传、下载和修改的操作。
使用 JS 实现附件上传
实现的方式分为四个步骤:
1.创建前端页面
2 编写暂存附件信息的方法
3.编写附件文件清除的方法
4.编写文件保存和文件加载的方法
1.创建前端页面
核心代码:
点击上传附件按钮可以把附件上传到对应的单元格,清除附件会清理掉所有已经上传过的附件信息,打包下载会对所有的附件进行统一下载。
2.暂存附件信息方法
这一步起始主要用来设置文件上传之后单元格超链接及 tag 信息。细心的同学会注意到,这里我注册了一个命令,超链接本身会有一个跳转的行为,写 command 之后,会阻止这个默认跳转,转去执行对应的命令。注册的命令主要就是用来做附件文件的下载。
核心代码:
在这里,我引入了三方组件库 FileSaver,在点击超链接单元格时,可以支持当前附件文件的下载。
3. 附件文件清除
4. 文件保存/加载
将文件保存成为 JSON 结构:
实现功能和效果:
在需要在某个单元格中上传附件时,我们可以弹出一个模态框,在模态框中上传文件,点击提交之后,可以对文件做一个暂存,将文件信息存储在单元格的 Tag 中,点击单元格可以下载文件。
完整代码和在线 Demo 地址:
https://jscodemine.grapecity.com/share/VHlpNyuP-0CIBNleP5jtyA/
文章转载自:葡萄城技术团队
评论