首页 > 编程语言 >如何使用JavaScript实现在线Excel附件的上传与下载?

如何使用JavaScript实现在线Excel附件的上传与下载?

时间:2024-06-19 17:30:29浏览次数:25  
标签:文件 sheet JavaScript Excel 附件 上传 col row

前言

在本地使用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地址:

SpreadJS上传附件 - JS CodeMine

文章转载自:葡萄城技术团队

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

体验地址:引迈 - JNPF快速开发平台_低代码开发平台_零代码开发平台_流程设计器_表单引擎_工作流引擎_软件架构

标签:文件,sheet,JavaScript,Excel,附件,上传,col,row
From: https://blog.csdn.net/dsgdauigfs/article/details/139805862

相关文章

  • C#使用 NPOI 添加图片到 Excel 单元格
    入参:工作簿对象,某个单元格对象,将要写入的图片字节数组 对象解释:XSSFClientAnchor:可设置图片放置的开始、结束单元格,X、Y起始点位(这里挖个坑,具体设置多少可以根据行高等进行计算,具体可参考pic.Resize()的实现)///<summary>///将图片添加到工作簿///</summary>/......
  • 深入理解JavaScript中的闭包与作用域链
    作为一名JavaScript开发者,了解闭包与作用域链是非常重要的。本文将深入探讨这两个概念,帮助您更好地理解JavaScript的运行机制。作用域链在JavaScript中,每个函数都有一个属于自己的作用域,称为局部作用域。当函数被执行时,会创建一个执行上下文,其中包括局部作用域和其父级作用域......
  • 掌握异步编程:探索JavaScript中的Promise与async/await
    在现代JavaScript开发中,异步编程已经成为了不可或缺的一部分。为了更好地处理异步操作,JavaScript引入了Promise和async/await两个重要概念。本文将带您了解这两个概念,帮助您掌握异步编程。 PromisePromise是异步编程的一种解决方案,它表示一个异步操作的最终完成(或失败)及其结......
  • JavaScript之BOM
    BOMBOM将浏览器中的各个部分转换成了一个一个的对象,我们通过修改这些对象的属性,调用他们的方法,从而控制浏览器的各种行为BOM对象window用来存储所有全局的属性和方法windows对象表示浏览器当前打开的窗口window对象是BOM的核心,它表示一个浏览器的实例。在浏览器中......
  • JavaScript之DOM
    DOMDOM,全称DocumentObjectModel文档对象模型。JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面,改变页面的内容、结构、样式。文档文档表示的就是整个的HTML网页文档对象对象表示将网页中的每一个部分都转换为了一个对象(通过修改对象去修......
  • JavaScript基础部分知识点总结(Part2)
    初识JavaScript1.JavaScript是什么JavaScript是世界上最流行的语言之一,是一种运行在客户端的脚本语言(Script是脚本的意思)脚本语言:不需要编译,运行过程中由js解释器(js引擎)逐行来进行解释并执行现在也可以基于Node.js技术进行服务器端编程2.JavaScript的作用表单动态校......
  • Java与React轻松导出Excel/PDF数据
    前言在B/S架构中,服务端导出是一种高效的方式。它将导出的逻辑放在服务端,前端仅需发起请求即可。通过在服务端完成导出后,前端再下载文件完成整个导出过程。服务端导出具有许多优点,如数据安全、适用于大规模数据场景以及不受前端性能影响等。本文将使用前端框架React和服务端框架S......
  • C# 数据导出成Excel的流
    导出的帮助类publicclassExcelHelper{///<summary>///将给定的模型列表转换为Excel内存流,第一行和第二行是居中对齐加粗的///</summary>///<typeparamname="T">模型类型</typeparam>///<paramname="models&qu......
  • Arduino实现温湿度传感器以及数据上传到云(乐维互联)
    0准备材料0.1ESP-01S引脚及定义官方定义:序号pin功能1GND地线2IO0/GPIO0工作模式选择:①悬空:FlashBoot,工作模式②下拉:UARTDownLoad下载模式3IO2/GPIO2通用IO4RX/RXD数据接收端5TX/TXD谁发送端63V3/VCC3.3V,模块供电7RST1)外......
  • JavaScript中各种源码实现
    文章目录JavaScript中各种源码实现1.实现一个new操作符2.实现一个Array.isArray3.实现一个Object.create()方法4.实现一个EventEmitter5.实现一个Array.prototype.reduce6.实现一个call或apply7.实现一个Function.prototype.bind8.实现一个JS函数柯里化9.手写防......