摘要：以字符串形式輸出文本內(nèi)容使用二進(jìn)制數(shù)組存儲文本內(nèi)容以上的方法都是實(shí)例，可以用方法指定狀態(tài)的回調(diào)函數(shù)。先將圖片轉(zhuǎn)換為格式使用，再將其轉(zhuǎn)換為二進(jìn)制流進(jìn)行加壓。

本文主要介紹jszip在vue中如何使用

本文涉及到Promise對象和async函數(shù)的使用，建議先提前去了解一下

關(guān)于jszip的使用官方文檔已經(jīng)介紹的非常詳細(xì)了，而且也有示例：https://stuk.github.io/jszip/...

我這里主要是結(jié)合項目的需求然后抽離出來的demo，主要是對圖片的加壓和解壓

使用.loadAsync(data)可以加載zip文件，data必須是二進(jìn)制流，我這里是使用html原生的input上傳文件來獲取文件流，如果需要讀取本地文件可以使用JSZipUtils.getBinaryContent(zipPath, callback)

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()讀取文件里面的內(nèi)容。

zip.file("hello.txt").async("string").then(function (data) {
  // 以字符串形式輸出文本內(nèi)容
});

if (JSZip.support.uint8array) {
  zip.file("hello.txt").async("uint8array").then(function (data) {
    // 使用二進(jìn)制數(shù)組存儲文本內(nèi)容
  });
}

以上的方法都是Promise實(shí)例，可以用then方法指定resolved狀態(tài)的回調(diào)函數(shù)。

本示例中通過上傳文件獲取文件并將其解壓將文件內(nèi)容顯示在頁面上

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") // 將圖片轉(zhuǎn)化為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") // 以字符串形式輸出文本內(nèi)容
                base.then(res => {
                    this.dataList.push({
                        fileName: zip.files[key].name,
                        type: "text",
                        content: res
                    })
                })
            }
        }
    }
})

使用.file(name, content)將內(nèi)容寫進(jìn)文件

zip.file("Hello.txt", "Hello world
");

使用.generateAsync(option)將文件轉(zhuǎn)換為流文件，并使用FileSaver的saveAs(content, fileaname)將文件保存到本地

zip.generateAsync({type:"blob"})
.then(function (blob) {
    saveAs(blob, "hello.zip");
});

本示例主要是對圖片進(jìn)行加壓。先將圖片轉(zhuǎn)換為base64格式（使用canvas），再將其轉(zhuǎn)換為二進(jìn)制流進(jìn)行加壓。因為是使用img.onload異步加載圖片，必須等待圖片加載完后才能將其進(jìn)行加壓，所以需要用async函數(shù)將異步轉(zhuǎn)換為同步。

/**
 *
 * @param url 圖片路徑
 * @param ext 圖片格式
 * @param callback 結(jié)果回調(diào)
 */
async getUrlBase64(url, ext) {
    return new Promise((resolve, reject) => {
        var canvas = document.createElement("canvas") // 創(chuàng)建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) // 參數(shù)可自定義
            var dataURL = canvas.toDataURL("image/" + ext)
            resolve(dataURL) // 回調(diào)函數(shù)獲取Base64編碼
            canvas = null
        }
    })
},
async exportZip() {
    const imgList = this.imgList
    const proList = []
    const zip = new JSZip()
    const cache = {}
    await imgList.forEach(item => { // 等待所有圖片轉(zhuǎn)換完成
        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 => { // 生成二進(jìn)制流
            saveAs(content, "images.zip") // 利用file-saver保存文件
        })
    })
}

以上讀取和保存文件的方法只使用于在瀏覽器中使用，如果需要在node.js中讀取和保存文件的話可以使用node.js內(nèi)置模塊fs。

以上，如果有錯誤的地方歡迎指正

https://github.com/1366053981...

https://blog.csdn.net/qq_3285...

https://segmentfault.com/a/11...

博客地址
CSDN