经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » Java相关 » Java » 查看文章
如何使用JavaScript实现在线Excel附件的上传与下载?
来源:cnblogs  作者:葡萄城技术团队  时间:2024/6/19 15:18:52  对本文有异议

前言

在本地使用Excel时,经常会有需要在Excel中添加一些附件文件的需求,例如在Excel中附带一些Word,CAD图等等。同样的,类比到Web端,现在很多人用的在线Excel是否也可以像本地一样实现附件文件的操作呢?答案是肯定的,不过和本地不同的是,Web端不会直接打开附件,而是使用超链接单元格的形式来显示,今天小编将为大家介绍使用前端HTML+JS+CSS技术通过超链接单元格的形式实现在线Excel附件上传、下载和修改的操作。

使用JS实现附件上传

实现的方式分为四个步骤:

1.创建前端页面

2编写暂存附件信息的方法

3.编写附件文件清除的方法

4.编写文件保存和文件加载的方法

1.创建前端页面

核心代码:

  1. <div style="margin-bottom: 8px">
  2. <button id="uploadAttach">上传附件</button>
  3. <button id="removeAttach">清除附件</button>
  4. <button id="fileSaver">文件保存</button>
  5. <button id="loadSubmitFile">加载文件</button>
  6. <button id="loadPackage">打包下载</button>
  7. </div>
  8. <div id="fileOperate" style="visibility: hidden;position: absolute;top: 100px;left: 300px;z-index: 10; background-color: #eee;padding: 16px">
  9. <label for="choseFile">选择文件\</label>
  10. <input type="file" id="choseFile" name="choseFile"/>
  11. <button id="submit">提交</button>
  12. <button id="cancel">取消</button>
  13. </div>

点击上传附件按钮可以把附件上传到对应的单元格,清除附件会清理掉所有已经上传过的附件信息,打包下载会对所有的附件进行统一下载。

2.暂存附件信息方法

这一步起始主要用来设置文件上传之后单元格超链接及tag信息。细心的同学会注意到,这里我注册了一个命令,超链接本身会有一个跳转的行为,写command之后,会阻止这个默认跳转,转去执行对应的命令。注册的命令主要就是用来做附件文件的下载。

核心代码:

  1. function hasAttachFile(sheet,row,col,file){
  2. \*\*
  3. \* 附件文件暂存
  4. \* 这里由于没有服务端,所以我直接存了File对象,但File对象只有在实际使用时才会去获取实际的文件内容。在demo中可行
  5. \* 在实际项目中,需要将file对象上传到文件服务器中
  6. \* 上传完成后tag中的fileInfo应该代表的是文件的访问地址,而不能再是File对象。
  7. \*
  8. sheet.setValue(row,col,file.name)
  9. sheet.setTag(row,col,{
  10. type: hyerlinkType,
  11. fileInfo: file // 实际项目中fileInfo应该为上传完成文件的访问路径
  12. })
  13. sheet.setHyperlink(row, col, {
  14. url: file.name,
  15. linkColor: '#0066cc',
  16. visitedLinkColor: '#3399ff',
  17. drawUnderline: true,
  18. command:'downloadAttachFile',
  19. }, GC.Spread.Sheets.SheetArea.viewport);
  20. }

在这里,我引入了三方组件库FileSaver,在点击超链接单元格时,可以支持当前附件文件的下载。

  1. // 下载文件
  2. spread.commandManager().register("downloadAttachFile",{
  3. canUndo: false,
  4. execute: function(context,options,isUndo){
  5. let sheet = context.getActiveSheet()
  6. let row = sheet.getActiveRowIndex()
  7. let col = sheet.getActiveColumnIndex()
  8. let cellTag = sheet.getTag(row,col)
  9. console.log(sheet,row,col,cellTag)
  10. if(cellTag && cellTag.type==hyerlinkType){
  11. \*\*\*
  12. \* 纯前端demo,文件存在于本地,fileInfo中存储的是File对象,可以直接获取到文件
  13. \* 实际项目中,fileInfo应该是上传到文件服务器上的文件访问地址。
  14. \* 因此这里需要发送请求,先获取文件blob,将获取的blob传递到saveAs的第二个参数中。
  15. \*
  16. saveAs(cellTag.fileInfo,cellTag.fileInfo.name)
  17. }
  18. }
  19. })

3. 附件文件清除

  1. document.getElementById("removeAttach").onclick = function(){
  2. \*\*\*
  3. \* 清除附件
  4. \* 清除附件需要先删除远程文件服务器的文件,之后清除单元格的Tag信息。
  5. \* 这里前端演示demo,只删除了tag
  6. \* 实际项目中tag中的fileInfo应该是文件上传后的路径
  7. \*
  8. let sheet = spread.getActiveSheet()
  9. let row = sheet.getActiveRowIndex()
  10. let col = sheet.getActiveColumnIndex()
  11. spread.commandManager().execute({
  12. cmd:"removeAttachFile",
  13. sheet,row,col
  14. })
  15. }

4. 文件保存/加载

将文件保存成为JSON结构:

  1. document.getElementById("fileSaver").onclick = function(){
  2. // 保存文件
  3. submitFile = spread.toJSON()
  4. spread.clearSheets()
  5. spread.addSheet(0)
  6. }
  7. 加载已保存文件:
  8. document.getElementById("loadSubmitFile").onclick = function(){
  9. // 加载已保存文件
  10. spread.fromJSON(submitFile)
  11. }

实现功能和效果:

在需要在某个单元格中上传附件时,我们可以弹出一个模态框,在模态框中上传文件,点击提交之后,可以对文件做一个暂存,将文件信息存储在单元格的Tag中,点击单元格可以下载文件。

完整代码和在线Demo地址:

https://jscodemine.grapecity.com/share/VHlpNyuP-0CIBNleP5jtyA/

扩展链接:

Spring Boot框架下实现Excel服务端导入导出

项目实战:在线报价采购系统(React +SpreadJS+Echarts)

Svelte 框架结合 SpreadJS 实现纯前端类 Excel 在线报表设计

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号