表格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/
扩展链接:
项目实战:在线报价采购系统(React +SpreadJS+Echarts)
Svelte 框架结合 SpreadJS 实现纯前端类 Excel 在线报表设计
表格JS实现在线Excel的附件上传与下载的更多相关文章
- EBS开发附件上传和下载功能(转)
原文地址: EBS开发附件上传和下载功能 上传 Oracle ERP二次开发中使用的方式有两种,一是通过标准功能,在系统管理员中定义即可,不用写代码,就可以使几乎任何Form具有附件功能,具体参考系统 ...
- vue实现Excel文件的上传与下载
一.前言项目中使用到比较多的关于Excel的前端上传与下载,整理出来,以便后续使用或分析他人. 1.前端vue:模板下载与导入Excel 导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件 ...
- java 附件上传、下载前后端代码
前言:业务需要:附件上传,需要同时满足浏览器上传,和APP上传附件,并且浏览器端不可使用form表单提交,因为表单提交无法直接获取返回值,除非刷新页面才可显示上传的附件.所以此处使用ajaxfileu ...
- 图片,word,Excel等附件上传
@ResponseBody @RequestMapping("/upload") public String upload(HttpServletRequest request, ...
- sap中Excel的模版上传和下载
一:事物码smw0 二:上传步骤 注:"包"为项目的包的名称. 三:下载代码 l_filename = 'XX.xls'. l_muban = 'z123'. *&---下 ...
- EBS开发附件上传和下载功能
上传 Oracle ERP二次开发中使用的方式有两种,一是通过标准功能,在系统管理员中定义即可,不用写代码,就可以使几乎任何Form具有附件功能,具体参考系统管理员文档:二是通过PL/SQL Gate ...
- 基于SpringMVC的文件(增删改查)上传、下载、更新、删除
一.项目背景 摘要:最近一直在忙着项目的事,3个项目过去了,发现有一个共同的业务,那就是附件的处理,附件包括各种文档,当然还有图片等特殊文件,由于时间的关系,每次都是匆匆忙忙的搞定上线,称这项目的空档 ...
- 百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程之更改图片和附件上传路径
本文是接上一篇博客,如果有疑问请先阅读上一篇:百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程 默认UEditor上传图片的路径是,编辑器包目录里面的net目录下 下面就演示如 ...
- java对excel表格的上传和下载处理
Excel表格文件的上传和下载,java中涉及到文件肯定会有io流的知识. 而excel文件就要涉及到poi技术,而excel的版本包括:2003-2007和2010两个版本, 即excel的后缀名为 ...
- C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi
C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...
随机推荐
- ESLint: Expected a space before ‘/>;‘, but not found. (vue/html-closing-bracket-spacing)
文件->设置->编辑器->代码样式->HTML->其他-->在空的标签(打钩)
- 自定义组件模拟v-model
在项目中常常会遇到一个组件中引入好几个子组件的情况,而引入的子组件和子组件之间又需要有数据交互,如果使用父组件作为桥梁进行数据交互这个也是可以的,只是有些麻烦,so最理想的是子组件和子组件自己去交互, ...
- 荣登国家级榜单!ShowMeBug创始人李亚飞入选「科创中国·青年创业榜」
近日,中国科协召开2022"科创中国"年度会议,会上发布了2021"科创中国"系列榜单.其中,ShowMeBug 创始人&CEO李亚飞入选2021年科创 ...
- CF1477E&大户爱的送分题题解
CF1477E&大户爱的送分题题解 (CF1477E为我出的校内模拟赛的一道题--<大户爱的送分题>的待修版本) 大户爱的送分题 文件名OhtoAiFirst.cpp/.in/.o ...
- 隐藏Tomcat中间件名称及版本号
目的 防止黑客利用Tomcat中间件及版本号有针对性发起攻击. 处理方法 输入命令方式 # 进入tomcat/lib目录 cd Tomcat目录/lib # 解决catalina.jar,备份Serv ...
- 华为防火墙NAT技术
---我是陈小瓜,一个普通的路人,和大家一起交流学习,完善自己. 源NAT NAT-no-pat 安全策略写法: 源NAT,写安全策略,写转换前的私网IP,因为先匹配安全策略.再匹配NAT策略 NAT ...
- google colab使用体验
复现的TRSSL 的代码似乎是python3.8的,在本地跑电脑带不起来,即时把处理图形数改为1 但是colab用3.8不太好下载包, 因此直接上了3.9 除了一些库没有意外,遇到了一点小问题: Ca ...
- 深入JS——理解闭包可以看作是某种意义上的重生
JS中有一个非常重要但又难以完全掌握的概念,那就是闭包.很多JS程序员自以为已经掌握了闭包,但实质上是一知半解,就像"JS中万物皆为对象"这个常见的错误说法一样,很多前端开发者到现 ...
- Day02_Java_作业
A:选择题 1. 若有定义:int a,b; a=a+10;则执行上述语句后,a的值是(d). A. 10 B. 11 C. 0 D. 编译产生错误 2. 以下选项中变量均已正确定义,合法的赋值语句是 ...
- sql相关小知识—
数据库系统达到了数据独立性是因为采用了三级模式结构 人们为数据库设计了一个严谨的体系结构,数据库领域公认的标准结构是三级模式结构,它包括外模式.概念模式.内模式,有效地组织.管理数据,提高了数据库的逻 ...