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

<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;
}

猜你喜欢

转载自blog.csdn.net/xudejun/article/details/83994140
今日推荐