jszip基本使用及应用实例
1|0前言
- 网页端操作,将一堆文件批量打包成一个压缩包一次性下载给到用户, 现成的插件可以用jszip, 需要了解底层可以自行阅读源码
- 这里记录jszip的基本用法及自已项目需求下的灵活运用和感悟
2|0场景
- 需要打包的文件分成两类, 分装到两个文件夹中, 其中一类是后台拿到的文件地址类直接访问获取的文件, 另一类是前端渲染页面, 然后用pdf插件将dom生成pdf文件, 这两类文件的获取、处理、写入压缩包的流程都有区别
3|0解决
3|1安装
- jszip只是把文件处理成zip,但是还没有下载给到用户,还需要FileSaver配合处理才能实现打包并下载
npm i -s jszip
npm i -s file-saver
3|2导入
- FileSaver插件用到的是saveAs来实现下载
3|3jszip基本使用方法
- 众所周知,压缩包里肯定是可以有文件和文件夹的,而写这两种的方式也不同
JSzip.file(filePath, fileContent(, options))
: 写文件
第一个参数是filePath,文件路径,注意不是fileName文件名,有什么区别呢?比如传'txt/test.txt'和'test.txt'都是可以的,但是意义却不一样,前者表示在根目录的txt文件夹下写入一个test.txt文件,后者则是表示在根目录下写入一个test.txt文件
第二个参数是fileContent,文件内容,可供选择的内容形式很多,String、Blob、ArrayBuffer等都可以,也就意味着可以是直接写文本内容,可以直接带文件实例的内容,也可以是异步处理的二进制内容。
第三个参数options是zip压缩包参数配置,非必须,这里不细讲
栗子:JSzip.folder(folderName)
: 写文件夹
这个相对file就比较单纯,就是写一个文件夹,但是它可以是链式的,从而实现套层
栗子: 上述栗子的结果就是,在根目录下有一个folder1文件夹,folder1里有folder2文件夹和两个txt文件,folder2里又有一个file2.txt文件,可以看到,folder()的返回值是JSzip,所以可以链式,而file之后就不能继续了。而要往同一个folder里塞文件或者文件夹,就要逐次操作。
- 写入到zip文件并下载,
JSzip.generateAsync()
:
上面栗子中的zip和zip1接着用,栗子zip中用到了异步,所以写zip肯定是在异步处理之后,实际情况也是异步居多
所以这里我们把每个写文件任务都用Promise封装起来,用一个promises暂存所有promise任务,开启所有任务之后,用promises监听所有任务的完成
3|4实际场景中的使用及感悟
- 对所有即将写入zip的文件的生成过程的promise封装处理
封装成promise之后,在每个调用它们的地方都保留promise任务 - 用前端渲染的页面的dom,生成pdf,然后写入到zip中
- 首先,页面渲染的速度肯定是跟不上数据处理的速度的,那么在有多个dom要处理的时候,就不应该是只针对同一个dom进行数据的刷新从而使页面刷新,这样的话处理出来的pdf文件对应的数据肯定是错乱的;这也就意味着我们应该让一个pdf文件对应一个dom,进行单独渲染,每个dom之间互不干扰,数据才能正确。
- 所以将需要渲染的页面定义为一个组件pdfDom,方便调用;但还不够,我们并不是一开始就在父组件里初始化了一堆pdfDom,由于异步操作,我们并不知道任务量,不可能写死pdfDom的数量,所以肯定是对象实例化的形式在页面appendChild,处理完写入zip逻辑之后removeChild,这就涉及到如何appendChild一个vue组件。
- 那么现在的问题就是,如何给页面动态新增一个组件
- 至此,就只剩把dom处理成pdf,然后remove掉了
上面的generateFilesByDom传入动态的div,然后用jspdf处理就好了,放一下代码
- 核心内容差不多就这些了
__EOF__

本文作者:Mizuki
本文链接:https://www.cnblogs.com/mizuki-vone/p/16651049.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
本文链接:https://www.cnblogs.com/mizuki-vone/p/16651049.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库