前端压缩下载工具Jszip使用中遇到的问题

最新推荐文章于 2023-09-08 11:22:29 发布
最新推荐文章于 2023-09-08 11:22:29 发布
阅读量1.3k 收藏
点赞数 3
分类专栏： 前端插件 JsZip 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_41860731/article/details/121693797
版权

记录一下让我找了几个小时，最终却只改了一行代码的bug（大哭）

场景是获取到数组文件，循环这个数组，使用zip.file()向zip压入文件。循环正常执行，但是最终在压缩包里只看到一个文件，打印console.log(zip)，查看zip对象也只看到一个文件。后面发现是我这些文件名的filename重了，导致后面一个覆盖了前面一个，最终就只剩一个文件了。

代码就不演示了，如果有小伙伴有相同问题的话，建议查看下文件名哦！

批量导出-先打包后下载为zip
lifangfang0607的博客
01-19 293
批量导出需要先将文件组逐个添加打包，然后下载 安装插件 jszip，file-saver require('script-loader!file-saver') import JSZip from 'jszip' exportConfig(){ const data = this.detailForm const zipname = '下载' const zip = new JSZip() const cache = {} data.forEach(item=>{ const filen
Vue.js组件开发-实现多个文件附件压缩下载
最新发布
LCG元的博客
01-26 718
在 Vue 项目中实现多个附件压缩下载，可以借助jszip库来创建压缩文件，以及file-saver库来保存生成的压缩文件。
使用JSZipUtils报Can‘t find end of central directory:is this a zip file?
qq_42383970的博客
06-29 2130
解决JSZipUtils读取文件报错问题
npm-使用JSZIP批量下载文件并打包压缩，解决在浏览器生产环境下zip.generateAsync不执行问题
qq_41256253的博客
06-22 2584
在浏览器生产环境下zip.generateAsync不会执行，这是由于该方法需要在node环境才能执行，使用JSZip-sync这个包代替jszip即可解决这个问题。用法：只需要在外层使用包裹。
解决：js下载zip文件流出现“未知文件格式”错误
wsx981049288的博客
07-07 2119
js下载后端返回的zip包，出现“未知文件格式”的错误解决方法
React引入jszip实现多个文件打包成zip下载
明知山
04-20 1820
安装两个插件 yarn add jszip file-saver 可直接复制查看效果 import JSZip from 'jszip' import { saveAs } from 'file-saver' export default () => { //通过请求获取文件blob格式 function getFileBlob(url) { return new Promise((resolve, reject) => { let r.
前端js下载zip文件异常问题解决
阿昊的博客
09-08 2741
前端js下载zip文件异常问题解决
JsZip：JavaScript压缩库使用教程及源码解读
JsZip库的API设计得非常直观简洁，使得前端开发人员能够轻松地在浏览器环境中使用其功能。对于经常需要处理文件下载、文件压缩等场景的Web应用来说，JsZip提供了一个非常方便的解决方案。JsZip能够处理ZIP文件的读写...
JS-CSS压缩工具
01-02
4. **jsZip.vshost.exe、jsZip.exe**：这两个文件是程序的执行文件，`vshost.exe`是Visual Studio的托管调试主机，用于辅助开发过程中的调试，而`jsZip.exe`则是实际的应用程序主程序，负责运行JS-CSS压缩工具的功能...
Jszip库实现ZIP文件解压与使用教程
要在Egret项目中使用JSZip，首先需要将JSZip库引入项目中。可以通过下载JSZip库文件或者使用CDN链接的方式引入。一旦引入，JSZip库就可以被Egret项目使用。 **2. 使用JSZip解压zip文件** 在Egret项目中，可以通过...
JSZip使用Javascript创建读取和编辑zip文件
08-10
JSZip 使用Javascript创建，读取和编辑.zip文件
使用JSZip轻松用JavaScript处理ZIP文件
这个标签说明了JSZip属于JavaScript开发领域中的一个辅助工具，它不属于核心开发流程的一部分，但能有效地解决前端开发中遇到的特定问题，比如文件压缩、读取和管理。JSZip这类库的使用可以为开发者带来便捷，但其...
JSZIP+StreamSaver下载大文件打包遇到的问题
MaizerBLog
01-07 3477
背景:公司项目为了节约服务器硬盘,需要从微信企业微盘下载大批量文件,然后,进行客户端打包. 问题: 根据StreamSaver的代码演示例子,是通过指定Blob类型进行流下载更新,我尝试了这个方法,发现一旦Blob类型大于1G的时候,Chrome浏览器便会跑出Type Error:network error.无法进行下载.也就是说当文件批量下载缓存到内存中后,JSZIP工作正常,可以进行压缩,但是,一旦执行reader.read()方法便会抛出异常. 解决:查阅JSZIP的代码与StreamSaver
js 打包七牛文件并下载zip
weixin_34190136的博客
08-29 1300
需求分析：根据七牛存储的文件url，把这些文件打包下载。 实现方式，获取文件内容，使用 jszip 进行压缩，最后使用 file-saver 进行保存下载。 需要注意两点： 1：某些 web框架（比如 laravel） 会给 axios 配置上默认的请求头。在请求文件时需要去掉默认的请求头，同时设置Content-type 为'appli...
JSzip 前端处理下载打包文件夹
samll_redhat的博客
02-24 942
// 将文件夹里的文件作为数组传进来 filesToRar(files) { this.fileCount = files.length this.zippedFileCount = 0 let zip = new JSZip(); this.zipDir(zip, files, zip); }, // 循环下载数组中的每个文件 zipDir(zip, files, packageZip) { for (l...
Jszip的使用和打包下载图片
weixin_30369087的博客
01-15 1598
因为canvas总结到后面又想到了jszip的一些事情，那就索性也回去看看吧。试过，至少谷歌和火狐都是支持jszip的。 1、 jszip的使用 官方文档说的很清楚了，而且也有读取zip文件、生成zip文件下载的js代码示例，下面就简单说说吧。 　　<1>读取zip文件，一般用于上传zip文件后读取内容，不过我懒得写input结构，并没有实现，只是了解一下，官网文档有相关...
zip文件操作导致服务崩溃
weixin_44349028的博客
11-15 1208
需求： zip包中有个json文件，需要将json文件进行转化再生成一个json文件并放到同级目录下。 实现过程 1、未进行解压zip文件，通过zipProp.entries()读取zip包中的文件元素，读取到json文件就进行转化再次生成一个json文件，然后将生成的json文件直接append到原zip文件中（存在于zip包的根目录下），这样的操作不需要对zip包进行解压再压缩，处理速度快，但是生成的json文件和之前的json文件不在同一个目录下。2、若需要将json文件放置到固定的文件夹中，就必.
vue 使用jszip将多个文件压缩下载压缩包
RubyLinT的博客
05-24 1622
vue 使用jszip将多个文件压缩下载压缩包
前端生成压缩文件实现批量下载
极简
10-19 702
1、准备工作 FileSaver.js:文件保存 jszip：文件压缩 moment:日期格式化工具(可选) 2、实例 import { saveAs } from 'file-saver/FileSaver' import moment from 'moment' const JSZip = require('jszip') let zip = new JSZip() zip.file('文件名1.xx', Blob1) // 添加压缩文件 zip.file('文件名2.xx', Blob2
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值