js 图片打包压缩下载到本地

1.需要使用 jszip 压缩插件 和 file-saver 插件

2. jszip  可以到网上找包下载也可以直接 npm install  jszip --save 引入 

3. file-saver 可以到网上找包下载也可以直接 npm install file-saver --save 引入

4.代码得使用示例

代码：（代码后面有截图）

import JSZip from 'jszip'

import FileSaver from 'file-saver'

export function packageImages (zData, fData, callback) {

var zimgs = zData

var fimgs = fData

var zimgBase64 = []

var fimgBase64 = []

var zip = new JSZip()//实例化一个压缩文件对象

     zip.file('readme.txt', '工牌\n')//注释文件

     var zimg = zip.folder('正') //新建一个图片文件夹用来存放图片 ‘正’为 文件夹名字

     var fimg = zip.folder('反') // 新建另外一个图片文件夹

 

//把所有 base64 数据图片去掉 base64 的头部位置

for (var i = 0; i < zimgs.length; i++) {

var src = zimgs[i]

     zimgBase64.push(zimgs[i].substring(22))

}

for (var i = 0; i < fimgs.length; i++) {

var src = fimgs[i]

     fimgBase64.push(fimgs[i].substring(22))

}

function tt () {

// if(imgs.length == zimgBase64.length){

//把处理过的base64图片数据存到 上面新建的文件夹中

for (var i = 0; i < zimgs.length; i++) {

zimg.file('（正面）第' + (i + 1) + '页' + '.jpg', zimgBase64[i], {base64: true})

}

for (var i = 0; i < fimgs.length; i++) {

fimg.file('（背面）第' + (i + 1) + '页' + '.jpg', fimgBase64[i], {base64: true})

}

callback && callback()

//进行压缩打包处理并下载到本地

zip.generateAsync({type: 'blob'}).then(function (content) {

// see FileSaver.js

FileSaver.saveAs(content, 'images.zip')

})

           // $('#status').text('处理完成。。。。。');

 

// }else{

//  //console.log('imgs.length:'+imgs.length+',zimgBase64.length:'+zimgBase64.length);

//  // $('#status').text('已完成：'+zimgBase64.length+'/'+imgs.length);

//  tt();

// }

}

tt()

}

截图：