摘要:本文由葡萄城技术团队于博客园原创并首发。转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。

前言

在本地使用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 在线报表设计

表格JS实现在线Excel的附件上传与下载的更多相关文章

  1. EBS开发附件上传和下载功能(转)

    原文地址: EBS开发附件上传和下载功能 上传 Oracle ERP二次开发中使用的方式有两种,一是通过标准功能,在系统管理员中定义即可,不用写代码,就可以使几乎任何Form具有附件功能,具体参考系统 ...

  2. vue实现Excel文件的上传与下载

    一.前言项目中使用到比较多的关于Excel的前端上传与下载,整理出来,以便后续使用或分析他人. 1.前端vue:模板下载与导入Excel 导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件 ...

  3. java 附件上传、下载前后端代码

    前言:业务需要:附件上传,需要同时满足浏览器上传,和APP上传附件,并且浏览器端不可使用form表单提交,因为表单提交无法直接获取返回值,除非刷新页面才可显示上传的附件.所以此处使用ajaxfileu ...

  4. 图片,word,Excel等附件上传

    @ResponseBody @RequestMapping("/upload") public String upload(HttpServletRequest request, ...

  5. sap中Excel的模版上传和下载

    一:事物码smw0 二:上传步骤 注:"包"为项目的包的名称. 三:下载代码 l_filename = 'XX.xls'. l_muban = 'z123'. *&---下 ...

  6. EBS开发附件上传和下载功能

    上传 Oracle ERP二次开发中使用的方式有两种,一是通过标准功能,在系统管理员中定义即可,不用写代码,就可以使几乎任何Form具有附件功能,具体参考系统管理员文档:二是通过PL/SQL Gate ...

  7. 基于SpringMVC的文件(增删改查)上传、下载、更新、删除

    一.项目背景 摘要:最近一直在忙着项目的事,3个项目过去了,发现有一个共同的业务,那就是附件的处理,附件包括各种文档,当然还有图片等特殊文件,由于时间的关系,每次都是匆匆忙忙的搞定上线,称这项目的空档 ...

  8. 百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程之更改图片和附件上传路径

    本文是接上一篇博客,如果有疑问请先阅读上一篇:百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程 默认UEditor上传图片的路径是,编辑器包目录里面的net目录下 下面就演示如 ...

  9. java对excel表格的上传和下载处理

    Excel表格文件的上传和下载,java中涉及到文件肯定会有io流的知识. 而excel文件就要涉及到poi技术,而excel的版本包括:2003-2007和2010两个版本, 即excel的后缀名为 ...

  10. C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi

    C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...

随机推荐

  1. ESLint: Expected a space before ‘/&gt;‘, but not found. (vue/html-closing-bracket-spacing)

    文件->设置->编辑器->代码样式->HTML->其他-->在空的标签(打钩)

  2. 自定义组件模拟v-model

    在项目中常常会遇到一个组件中引入好几个子组件的情况,而引入的子组件和子组件之间又需要有数据交互,如果使用父组件作为桥梁进行数据交互这个也是可以的,只是有些麻烦,so最理想的是子组件和子组件自己去交互, ...

  3. 荣登国家级榜单!ShowMeBug创始人李亚飞入选「科创中国·青年创业榜」

    近日,中国科协召开2022"科创中国"年度会议,会上发布了2021"科创中国"系列榜单.其中,ShowMeBug 创始人&CEO李亚飞入选2021年科创 ...

  4. CF1477E&大户爱的送分题题解

    CF1477E&大户爱的送分题题解 (CF1477E为我出的校内模拟赛的一道题--<大户爱的送分题>的待修版本) 大户爱的送分题 文件名OhtoAiFirst.cpp/.in/.o ...

  5. 隐藏Tomcat中间件名称及版本号

    目的 防止黑客利用Tomcat中间件及版本号有针对性发起攻击. 处理方法 输入命令方式 # 进入tomcat/lib目录 cd Tomcat目录/lib # 解决catalina.jar,备份Serv ...

  6. 华为防火墙NAT技术

    ---我是陈小瓜,一个普通的路人,和大家一起交流学习,完善自己. 源NAT NAT-no-pat 安全策略写法: 源NAT,写安全策略,写转换前的私网IP,因为先匹配安全策略.再匹配NAT策略 NAT ...

  7. google colab使用体验

    复现的TRSSL 的代码似乎是python3.8的,在本地跑电脑带不起来,即时把处理图形数改为1 但是colab用3.8不太好下载包, 因此直接上了3.9 除了一些库没有意外,遇到了一点小问题: Ca ...

  8. 深入JS——理解闭包可以看作是某种意义上的重生

    JS中有一个非常重要但又难以完全掌握的概念,那就是闭包.很多JS程序员自以为已经掌握了闭包,但实质上是一知半解,就像"JS中万物皆为对象"这个常见的错误说法一样,很多前端开发者到现 ...

  9. Day02_Java_作业

    A:选择题 1. 若有定义:int a,b; a=a+10;则执行上述语句后,a的值是(d). A. 10 B. 11 C. 0 D. 编译产生错误 2. 以下选项中变量均已正确定义,合法的赋值语句是 ...

  10. sql相关小知识—

    数据库系统达到了数据独立性是因为采用了三级模式结构 人们为数据库设计了一个严谨的体系结构,数据库领域公认的标准结构是三级模式结构,它包括外模式.概念模式.内模式,有效地组织.管理数据,提高了数据库的逻 ...