SpreadJS上传附件（二）—— 打包下载

收藏

本帖最后由 Winny 于 2022-7-28 17:31 编辑

在SpreadJS上传附件（一）中，介绍了添加附件文件的需求背景及实现方式，完成了附件的上传、修改、清除以及包含附件文件的保存及回显。如果还没有查看SpreadJS上传附件（一），请先移步查看。
接下来还有最后一步，就是实现文件的下载。在Excel中，如果我们想要保证附件文件能访问到，需要保证链接所指向的地址能够找到文件。按照之前添加的超链接的形式，附件文件需要和宿主文件处于同一个层级。那最简单的就是我们依次去下载宿主文件及附件文件即可。但是为了易用性考虑，我们尽量将宿主文件与附件文件做一个打包下载，这样时比较直观易用的。

实现方案：
关于打包下载的实现，这里我采用了两个开源的组件，分别是FileSaver以及JSZIP，关于这两个开源组件的介绍，大家自行搜索即可（用好搜索引擎是一个优秀程序员的必备素养）。
在点击打包下载时，我们先依次遍历当前spread中时附件文件的单元格，依次将文件信息添加至实例化的zip中。需要注意的是demo与实际项目存储在Tag中的fileInfo是不同的。demo中fileInfo存储的是File对象，但是File对象并不包含文件的实际内容，因此只能在demo中如此使用。在实际项目中，fileInfo应该是附件文件上传完成之后的访问地址。在添加到zip示例中，是需要发送请求，拿到具体的文件blob的。除了附件文件之外，还需要利用SpreadJS中提供的ExcelIO能力，将Spread对象转换成一个文件blob，并添加到实例化zip中。所有文件添加完成之后，调用jszip打包下载即可。核心代码如下：

function loadAllFiles(){
// 打包下载所有文件
let zip = new JSZip()
let io = new ExcelIO.IO()
// 先获取附件文件
let sheetCount = spread.getSheetCount()
for(let i=0;i<sheetCount;i++){
let sheet = spread.getSheet(i)
let rowCount = sheet.getRowCount()
let colCount = sheet.getColumnCount()
for(let row=0;row<rowCount;row++){
for(let col=0;col<colCount;col++){
let cellTag = sheet.getTag(row,col)
if(sheet.getHyperlink(row,col) && cellTag && cellTag.type==hyerlinkType){
// 实际项目中，单元格Tag中的fileInfo应该为文件路径，这里需要发送请求拿到文件的blob，demo里边直接从os里边读本地文件。
zip.file(cellTag.fileInfo.name,cellTag.fileInfo,{binary: true})
}
}
}
}
io.save(spread.toJSON(),(blob)=>{
console.log(blob)
zip.file("主文件.xlsx",blob,{binary: true})
zip.generateAsync({type:"blob"}).then((content)=>{
saveAs(content,"download.zip")
})
})
}

复制代码

具体的Demo实现可以参考: SpreadJS上传附件，Demo使用方式参考文章末尾attachFile.zip

		自动登录	找回密码
密码			立即注册

SpreadJS上传附件（二）—— 打包下载

0 个回复