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

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

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

1. function loadAllFiles(){
   
2.     // 打包下载所有文件
   
3.     let zip = new JSZip()
   
4.     let io = new ExcelIO.IO()
   
5.     // 先获取附件文件
   
6.     let sheetCount = spread.getSheetCount()
   
7.     for(let i=0;i<sheetCount;i++){
   
8.         let sheet = spread.getSheet(i)
   
9.         let rowCount = sheet.getRowCount()
   
10.         let colCount = sheet.getColumnCount()
    
11.         for(let row=0;row<rowCount;row++){
    
12.             for(let col=0;col<colCount;col++){
    
13.                 let cellTag = sheet.getTag(row,col)
    
14.                 if(sheet.getHyperlink(row,col) && cellTag && cellTag.type==hyerlinkType){
    
15.                     // 实际项目中，单元格Tag中的fileInfo应该为文件路径，这里需要发送请求拿到文件的blob，demo里边直接从os里边读本地文件。
    
16.                     zip.file(cellTag.fileInfo.name,cellTag.fileInfo,{binary: true})
    
17.                 }
    
18.             }
    
19.         }
    
20.     }
    
21.     io.save(spread.toJSON(),(blob)=>{
    
22.         console.log(blob)
    
23.         zip.file("主文件.xlsx",blob,{binary: true})
    
24.         zip.generateAsync({type:"blob"}).then((content)=>{
    
25.             saveAs(content,"download.zip")
    
26.         })
    
27.     })
    
28. }

复制代码

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