关于前端:表格JS实现在线Excel的附件上传与下载

30次阅读

共计 2992 个字符,预计需要花费 8 分钟才能阅读完成。

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

前言

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

正文完
 0