本文主要介绍jszip在vue中如何使用html
本文涉及到Promise对象和async函数的使用,建议先提早去了解一下vue
关于jszip的使用官方文档已经介绍的很是详细了,并且也有示例:https://stuk.github.io/jszip/...node
我这里主要是结合项目的需求而后抽离出来的demo,主要是对图片的加压和解压git
使用.loadAsync(data)能够加载zip文件,data必须是二进制流,我这里是使用html原生的input上传文件来获取文件流,若是须要读取本地文件能够使用JSZipUtils.getBinaryContent(zipPath, callback)github
JSZipUtils.getBinaryContent('path/to/content.zip', function(err, data) { if(err) { throw err; // or handle err } JSZip.loadAsync(data).then(function () { // ... }); }); // or, with promises: new JSZip.external.Promise(function (resolve, reject) { JSZipUtils.getBinaryContent('path/to/content.zip', function(err, data) { if (err) { reject(err); } else { resolve(data); } }); }).then(function (data) { return JSZip.loadAsync(data); }) .then(...)
使用.file(name).async()读取文件里面的内容。canvas
zip.file("hello.txt").async("string").then(function (data) { // 以字符串形式输出文本内容 }); if (JSZip.support.uint8array) { zip.file("hello.txt").async("uint8array").then(function (data) { // 使用二进制数组存储文本内容 }); }
以上的方法都是Promise实例,能够用then方法指定resolved状态的回调函数。segmentfault
本示例中经过上传文件获取文件并将其解压将文件内容显示在页面上跨域
const zipFile = e.target.files[0] const jszip = new JSZip() jszip.loadAsync(zipFile).then((zip) => { // 读取zip for (let key in zip.files) { // 判断是不是目录 if (!zip.files[key].dir) { if (/\.(png|jpg|jpeg|gif)$/.test(zip.files[key].name)) { // 判断是不是图片格式 let base = zip.file(zip.files[key].name).async( 'base64') // 将图片转化为base64格式 base.then(res => { this.dataList.push({ fileName: zip.files[key].name, type: 'img', content: `data:image/png;base64,${res}` }) }) } if (/\.(txt)$/.test(zip.files[key].name)) { // 判断是不是文本文件 let base = zip.file(zip.files[key].name).async( 'string') // 以字符串形式输出文本内容 base.then(res => { this.dataList.push({ fileName: zip.files[key].name, type: 'text', content: res }) }) } } } })
使用.file(name, content)将内容写进文件数组
zip.file("Hello.txt", "Hello world\n");
使用.generateAsync(option)将文件转换为流文件,并使用FileSaver的saveAs(content, fileaname)将文件保存到本地promise
zip.generateAsync({type:"blob"}) .then(function (blob) { saveAs(blob, "hello.zip"); });
本示例主要是对图片进行加压。先将图片转换为base64格式(使用canvas),再将其转换为二进制流进行加压。由于是使用img.onload异步加载图片,必须等待图片加载完后才能将其进行加压,因此须要用async函数将异步转换为同步。
/** * * @param url 图片路径 * @param ext 图片格式 * @param callback 结果回调 */ async getUrlBase64(url, ext) { return new Promise((resolve, reject) => { var canvas = document.createElement('canvas') // 建立canvas DOM元素 var ctx = canvas.getContext('2d') var img = new Image() img.crossOrigin = 'Anonymous' // 处理跨域 img.src = url img.onload = () => { canvas.width = img.width // 指定画板的高度,自定义 canvas.height = img.height // 指定画板的宽度,自定义 ctx.drawImage(img, 0, 0) // 参数可自定义 var dataURL = canvas.toDataURL('image/' + ext) resolve(dataURL) // 回调函数获取Base64编码 canvas = null } }) }, async exportZip() { const imgList = this.imgList const proList = [] const zip = new JSZip() const cache = {} await imgList.forEach(item => { // 等待全部图片转换完成 const pro = this.getUrlBase64(item, '.jpg').then(base64 => { const fileName = item.replace(/(.*\/)*([^.]+)/i,"$2") zip.file(fileName, base64.substring(base64.indexOf(',') + 1), { base64: true }) cache[fileName] = base64 }) proList.push(pro) }) Promise.all(proList).then(res => { zip.generateAsync({ type: 'blob' }).then(content => { // 生成二进制流 saveAs(content, 'images.zip') // 利用file-saver保存文件 }) }) }
以上读取和保存文件的方法只使用于在浏览器中使用,若是须要在node.js中读取和保存文件的话能够使用node.js内置模块fs。
以上,若是有错误的地方欢迎指正
https://github.com/1366053981...
https://blog.csdn.net/qq_3285...
https://segmentfault.com/a/11...
博客地址
CSDN