- 综合排序
- 最热优先
- 最新优先
- 来自专栏李维亮的博客
jszip demo
安装包 jszip和file-saver 代码 <template>
downloadZip</template> <script> import JSZip from 'jszip' import { saveAs } from 'file-saver' export default { name: "jszip", data(){ return { } }, methods:{ demoZip(){ var zip = new JSZip(); zip.file("Hello.txt",2K20编辑于 2022-04-07 - 来自专栏前端开发随笔
React引入jszip实现多个文件打包成zip下载
jszip文档 安装两个插件 yarn add jszip file-saver 可直接复制查看效果 import JSZip from 'jszip' import { saveAs } from } request.send() }) } const downLoad = () => { const zip = new JSZip
3.1K20编辑于 2022-05-05 前端日志回捞系统的性能优化实践｜得物技术
分析发现，包含文件压缩（JSZip）和OSS上传的 @dw/log-upload模块是体积元凶，但99%的用户在正常浏览时根本用不到它。 库的动态引入我们避免将 JSZip 打包到主库中，从主包中移除，改为在上传模块内部动态引入，优先使用业务侧可能已加载的全局window.JSZip。 /** * 获取 JSZip 实例 */export const getJSZip = async (): Promise<JSZip | null> => { try { if (! ) return null }}// 在上传模块中实现灵活的 JSZip 加载export const JSZipCreator = async () => { // 优先使用全局 JSZip （如果页面已经加载了） if (window.JSZip) { return window.JSZip } return JSZip}优化四：日志队列与性能优化在某些异常场景下，日志会短时间内高频触发
34310编辑于 2025-09-09- 来自专栏小语雀网
JS批量打包下载图片（笔记）
packageImages()">packageImages</button> <script src="http://stuk.github.io/<em>jszip</em> /test/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="https://stuk.github.io/<em>jszip</em> /dist/<em>jszip</em>.js"></script> <script type="text/javascript" src="http://stuk.github.io/<em>jszip</em>/vendor/FileSaver.js ); var imgsSrc = []; var imgBase64 = []; var imageSuffix = [];//图片后缀 var zip = new <em>JSZip</em>
3.2K30编辑于 2022-05-06 - 来自专栏hightopo
Zip 压缩、解压技术在 HTML5 浏览器中的应用
JSZip 是一款可以创建、读取、修改 .zip 文件的 javaScript 工具。 今天就来探讨下 JSZip 如何与 HT 拓扑应用结合。先来看看这期 Demo 的效果图： ? 第一步、需要将应用对相关资源打包成 .zip 文件， ? 第二步、在 html 文件中引入 JSZip 和 JSZipUtils 库，接下来就是请求 .zip 文件，并对 .zip 文件做解析处理。 在 .zip 文件中有包含图片文件，JSZip 只能获取到图片文件的 ArrayBuffer 数据，这时需要将 ArrayBuffer 转换为 Base64 才能够为浏览器所识别，所以这里定义了一个转换函数 JSZip 在压缩或解压数据的时候，如果出现速度较慢的情况，可以考虑使用 Web Worker，Web Worker的具体应用可以参考《3D拓扑自动布局之Web Workers篇》。
2.8K20发布于 2018-07-09 - 来自专栏HT
Zip 压缩、解压技术在 HTML5 浏览器中的应用
JSZip 是一款可以创建、读取、修改 .zip 文件的 javaScript 工具。 今天就来探讨下 JSZip 如何与 HT 拓扑应用结合。先来看看这期 Demo 的效果图： ? 第一步、需要将应用对相关资源打包成 .zip 文件， ? 第二步、在 html 文件中引入 JSZip 和 JSZipUtils 库，接下来就是请求 .zip 文件，并对 .zip 文件做解析处理。 在 .zip 文件中有包含图片文件，JSZip 只能获取到图片文件的 ArrayBuffer 数据，这时需要将 ArrayBuffer 转换为 Base64 才能够为浏览器所识别，所以这里定义了一个转换函数 JSZip 在压缩或解压数据的时候，如果出现速度较慢的情况，可以考虑使用 Web Worker，Web Worker的具体应用可以参考《3D拓扑自动布局之Web Workers篇》。
3.1K70发布于 2018-01-03 - 来自专栏那些年我们学过的前端
前端如何进行压缩下载
需要使用 jszip和FileSaver这两个插件 此处插入一张图片 这样看起来美观 ? mark ? mark <! /node_modules/jszip/dist/jszip.js"></script> <script src=". node_modules/file-saver/FileSaver.js"></script> <script> function create_zip() { var zip = new JSZip
98910发布于 2019-03-29 - 来自专栏HT
Zip 压缩和解压技术在 HTML5 中的应用
JSZip 是一款可以创建、读取、修改 .zip 文件的 javaScript 工具。 今天就来探讨下 JSZip 如何与 HT 应用结合。先来看看这期 Demo 的效果图： ? 第一步、需要将应用对相关资源打包成 .zip 文件， ? 第二步、在 html 文件中引入 JSZip 和 JSZipUtils 库，接下来就是请求 .zip 文件，并对 .zip 文件做解析处理。 在 .zip 文件中有包含图片文件，JSZip 只能获取到图片文件的 ArrayBuffer 数据，这时需要将 ArrayBuffer 转换为 Base64 才能够为浏览器所识别，所以这里定义了一个转换函数 JSZip 在压缩或解压数据的时候，如果出现速度较慢的情况，可以考虑使用 Web Worker，Web Worker的具体应用可以参考《3D拓扑自动布局之Web Workers篇》。
2.5K80发布于 2018-01-03 - 来自专栏Vue源码 & 前端进阶体系
【前端监控】离线日志
以便开发下载排查日志 自动上传的大致的流程图如下 用户上传的流程如下 API 简介 在上面中，大概两个主要操作 1、存数据 2、打包数据成 zip 存数据使用 indexDB，而 打包数据成zip，我们则会使用 JSZip ; if (cursor) { cursor.continue(); } } 这样就会循环触发 onsuccess 事件，直到读取所有数据 indexdb 的内容差不多就说到这里 2JSZip 用来读取本地日志，然后打包成zip，一次性上传 1、引入 jsZip 文件 2、打包压缩 比较简单，像这样 const zip = new JSZip(); zip.file( `a.log` / / >=4指点按 if (e.touches.length >= 3) { handler(); } }) 主要是为了弹窗给用户进行确定，这里我简单用了 confirm 处理 用 JSZip （ https://github.com/Stuk/jszip ） 和 JSZipUtils（https://github.com/Stuk/jszip-utils） 解压也很简单，就这么一段代码，只要拿到解压链接
2.1K50发布于 2021-09-09 - 来自专栏腾讯IMWeb前端团队
纯前端生成海报实践及其性能调优
最终通过JSZip 将图片打包进压缩包中。 4. 分析发现，最有可能出现问题的地方是步骤 3——最终通过JSZip将图片打包进压缩包中。 压缩包对象所占用的内存在 Excel 表格数据处理完成并下载之前是不会被释放的，会一直增长。 每处理 10 条数据就下载一次压缩包，将 JSZip （压缩包对象）所占用的内存释放。 但是事情真的有这么简单吗？ 网页内存增长情况 1 可以看到 JS Heap 在每处理一条 Excel 表格数据后都会增长，没有得到释放，这里没有得到释放的内存占用是上文分析的 JSZip 导致的吗？ 4 小结 回到最开始，JSZip 占用的问题依然存在，我们依然需要进行分包，不过分包的大小可以提升到1000条数据。 但是我们可以看到，如果不能找到问题的根本所在，一开始就进行分包也无济于事。
1.5K20编辑于 2022-06-29 - 来自专栏seth-shi的专栏
远程URL文件批量下载打包的方法
这个库打包文件 使用https://github.com/Stuk/jszip-utils获取远程数据（直接通过AJAX获取，需要转换格式） 直接下载这两个库，然后把dist/下的文件放入到项目，也可以用 github提供的方式引入 部分逻辑代码如下 // 引入文件 <script type="text/javascript" src="/xxx/<em>jszip</em>.min.js"></script> <script type="text/javascript" src="/xxx/<em>jszip</em>-utils.min.js"></script> <! --[if IE]> <script type="text/javascript" src="/xxx/<em>jszip</em>-utils-ie.min.js"></script> <! if (total === 0) { console.error('图集无图片可下载'); return; } let zip = new JSZip
90910编辑于 2023-12-18 - </template> <script> // @ is an alias to /src import JSZip from 'jszip' import axios from 'axios' import { saveAs } from 'file-saver' export default { name: even.dataTransfer.files this.commmon(files) }, commmon (files) { var zip = new JSZip 能不能做,要想看这个库的api具不具备将文件转化为zip文件,通过以上两个api,可以得知这个库是支持的. jszip库api 另外jszip库也支持读取本地和远程的zip文件返回内部文件目录,文件名.来自专栏TopFE
js不借助后端,多文件拖拽压缩上传,支持选择文件夹
主要用到的库是 jszip 则 则这里简单对jszip做下简单介绍,更详细的功能和api请移步官网. jszip是是一个创建,读取和写入.zip文件的js库, api优化,简单 浏览器支持 实现思路如下 @change="selectFile" /> </label>
4.3K10编辑于 2022-01-24
前端提效 - js 批量导出 excel 为zip压缩包
本篇文章主要介绍使用 exceljs、file-saver、jszip实现下载包含多层级文件夹、多个 excel、每个 excel 支持多个 sheet 的 zip 压缩包。 给每个 excel 创建 workbook并将数据写入，然后通过 JsZip库写入到压缩文件内，最终用 file-saver库提供的 saveAs方法导出压缩文件。 from 'jszip' /** * 导出多个文件为zip压缩包 */ export async function downloadFiles2Zip(params: IDownloadFiles2Zip ) { const zip = new JsZip(); // 待每个文件都写入完之后再生成 zip 文件 const promises = params?. ).then(blob => { saveAs(blob, `${params.zipName}.zip`) }) } async function handleFolder(zip: JsZip
在前端如何玩转 Word 文档
对于 Mammoth.js 内部是如何解析 Word 中的 XML 文件，我们就不做介绍了，反之我们来简单介绍一下 Mammoth.js 内部依赖的 JSZip 这个库。 2.3 JSZip 简介 JSZip 是一个用于创建、读取和编辑 「.zip」 文件的 JavaScript 库，含有可爱而简单的 API。 安装 使用 JSZip 时，你可以通过以下几种方式进行安装： 「npm」：npm install jszip 「bower」：bower install Stuk/jszip 「component」 ：component install Stuk/jszip 「手动」：先下载 JSZip 安装包，然后引入 dist/jszip.js 或 dist/jszip.min.js 文件 2.3.2 JSZip 使用示例 let zip = new JSZip(); zip.file("Hello.txt", "Hello Semlinker\n"); let img = zip.folder("images
如何实现 vue 文件的批量下载及相关操作方法
一、技术方案选型 （一）方案一：利用file - saver和jszip插件 原理：file - saver插件用于在浏览器中保存文件，jszip插件则可以创建和处理ZIP文件。 通过jszip将多个文件打包成一个ZIP文件，再利用file - saver将打包后的ZIP文件保存到本地。 安装插件： 在项目根目录下执行以下命令安装插件： npm install file - saver jszip 使用示例： 假设已经获取到一个文件URL数组fileUrls，其中每个元素是一个文件的下载链接 import { saveAs } from 'file - saver'; import JSZip from 'jszip'; export const batchDownload = async (fileUrls, fileNames) => { const zip = new JSZip(); const promises = []; fileUrls.forEach
如何实现 Vue 文件批量下载及相关操作流程解析
一、技术方案选型 （一）方案一：利用file - saver和jszip插件 原理：file - saver插件用于在浏览器中保存文件，jszip插件则可以创建和处理ZIP文件。 通过jszip将多个文件打包成一个ZIP文件，再利用file - saver将打包后的ZIP文件保存到本地。 安装插件： 在项目根目录下执行以下命令安装插件： npm install file - saver jszip 使用示例： 假设已经获取到一个文件URL数组fileUrls，其中每个元素是一个文件的下载链接 import { saveAs } from 'file - saver'; import JSZip from 'jszip'; export const batchDownload = async (fileUrls, fileNames) => { const zip = new JSZip(); const promises = []; fileUrls.forEach
js获取本页面元素并下载
步骤四：打包并下载 import JSZip from 'jszip'; download_zip(){ var zip = new JSZip(); var result = zip.folder see FileSaver.js saveAs(content, "识别结果.zip"); }); }, 需要两个npm 包， "file-saver": "^2.0.2", "jszip
Node zip压缩和解压缩
/dist", /*overwrite*/ true); 更多 api https://github.com/cthackers/adm-zip Use JSZip 这个库在使用的时候需要把文件一个个增加到 所以如果是对于一整个文件夹来说，就很麻烦，需要遍历文件夹 var JSZip = require("jszip"); var fs = require("fs"); var zip = new JSZip pic.jpeg", data, { base64: true }); var zipfolder = zip.generate({ type: "nodebuffer" }); fs.writeFile("jszip.zip ", zipfolder, function (err) { if (err) throw err; }); JSZip里面也有个folder方法，但它只是用来切换zip对象内部的虚拟路径，比如zip.folder 更多 API https://github.com/Stuk/jszip Use archiver and unzip archiver很强大，支持zip格式tar格式，只需要提供路径就可以压缩已存在的文件夹
《Nuxt.js 实战：从放弃到入门》四、轻松制作朋友圈九宫格图片
divided-image { width: 100%; height: 100%; object-fit: contain; } </style> 第三方库集成：为实现下载时将分割后的图片打包成 ZIP 文件，需要安装jszip 使用以下命令进行安装： npm install jszip 在代码中引入jszip库，并修改downloadAll函数以实现 ZIP 文件的创建和下载： import JSZipfrom'jszip
重学webpack4之plugin开发
webpack": "^4.43.0", "webpack-cli": "^3.3.12", "yazl": "^2.5.1" }, "dependencies": { "jszip plugins: [ new ZipPlugin({ filename: 'offline' }) ] } zip-plugin.js // 将文件压缩为zip包 const JSZip = require('jszip') const RawSource = require('webpack-sources').RawSource const path = require('path ') const zip = new JSZip() class ZipPlugin { constructor(options) { this.options = options
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号