JS前端用jszip生成zip压缩包下载

最新推荐文章于 2025-03-08 10:03:56 发布

xudejun

最新推荐文章于 2025-03-08 10:03:56 发布

阅读量1.2w

点赞数 2

分类专栏：前端打包图片 js打包 js压缩文件 js压缩图片 js打包下载

本文链接：https://blog.youkuaiyun.com/xudejun/article/details/83994140

版权

前端打包图片同时被 3 个专栏收录

2 篇文章

订阅专栏

js打包

1 篇文章

订阅专栏

js压缩文件

1 篇文章

订阅专栏

这篇博客详细介绍了如何在前端使用JSZip库来生成ZIP压缩包，并实现用户直接下载的功能，涵盖了从构建文件对象到触发下载的完整流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class='domo'>
<div class="yaojianbaogao" style="display: none;">
    <img src="image1.jpg" width="50"  data-ordercode="bianhao0001"  data-title="goods-good-1212" data-alt="goods-good-1212-pic1.jpg" >
    <img src="image1.jpg" width="50"  data-ordercode="bianhao0001"  data-title="goods-good-1212" data-alt="goods-good-1212-pic2.jpg" >
    <img src="image1.jpg" width="50"  data-ordercode="bianhao0001"  data-title="goods-good-1211" data-alt="goods-good-1211-pic1.jpg" >
</div>

    <a href="javascript:;" class="label label-primary radius ml-5 downloadzip">&nbsp;&nbsp;打包下载&nbsp;&nbsp;</a>
</div>

<script type="text/javascript" src="jszip/jszip.min.js"></script>
<script src="jszip/FileSaver.js"></script>

$(".downloadzip").click(function () {
    var imgs = $(this).parent().find('.yaojianbaogao').children();
    var zip = new JSZip();
    var file_name = '';
    $.each(imgs,function (index,item) {
        file_name  = $(item).data('ordercode')+'.zip';
        var img = zip.folder($(item).data('title'));
        var imgdata = getBase64Image($(item).attr('src'));
        var img_arr = imgdata.split(',');
        img.file($(item).data('alt'),img_arr[1],{base64: true});
    })
    zip.generateAsync({type:"blob"})
        .then(function(content) {
            saveAs(content, file_name);
        });
});

function getBase64Image(images) {
    var img = new Image();
    img.src = images;
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
    var dataURL = canvas.toDataURL();
    return dataURL;
}