JavaScript實現文件壓縮和解壓縮：了解JSZip庫

一、JSZip簡介與安裝

JSZip是一個用於創建、讀取和修改.zip格式文件的JavaScript庫。它支持壓縮和解壓縮操作，可以方便地處理zip文件。JSZip可以在瀏覽器端和Node.js環境中使用，同時它還提供了可靠的兼容性，可以與各種框架和庫一起使用。

要在項目中使用JSZip，可以通過npm安裝，也可以在官網上下載JSZip庫並手動引入。

// 通過npm安裝
npm install jszip

// 引入JSZip庫
import JSZip from 'jszip'

二、創建並壓縮文件

使用JSZip創建zip文件很簡單，只需要創建一個JSZip實例並調用其file()方法便可以往zip文件中添加文件和內容。以下代碼展示了如何創建一個包含”hello.txt”文件和內容為”Hello World!”的zip文件：

const zip = new JSZip()

zip.file("hello.txt", "Hello World!")

zip.generateAsync({ type: "blob" })
.then(function(content) {
  // 下載zip文件
  saveAs(content, "myZip.zip")
})

在上面的代碼中，首先通過new關鍵字創建了一個JSZip對象，然後使用file()方法向zip文件中添加了一個名為”hello.txt”的文件，並將其內容設置為”Hello World!”。接着通過調用generateAsync()方法生成zip文件內容，並將其保存為二進制流Blob的形式。最後通過調用saveAs()方法保存zip文件。

三、解壓縮文件

JSZip也可以用於解壓縮.zip文件。要解壓縮.zip文件，只需要將zip文件內容轉化為JSZip對象，然後調用其文件解壓縮方法即可。以下是解壓縮.zip文件的代碼示例：

const fileInput = document.getElementById("fileInput")

fileInput.addEventListener("change", function(event) {
  const file = event.target.files[0]

  const reader = new FileReader()
  reader.onload = function() {
    const zip = new JSZip()
    zip.loadAsync(reader.result)
    .then(function(zip) {
      // 獲取zip文件中的文件列表
      const fileNames = Object.keys(zip.files)
      // 獲取zip文件中的第一個文件內容
      return zip.files[fileNames[0]].async("string")
    })
    .then(function(content) {
      console.log(content)
    })
  }
  reader.readAsArrayBuffer(file)
})

上面的代碼中，使用了FileReader實例讀取文件，並將文件內容轉化為二進制數據數組。接着使用loadAsync()方法將文件內容轉化為JSZip對象，並調用該對象的async()方法獲取zip文件中的第一個文件的內容，並將其以字符串的形式輸出到控制台中。

四、處理多個文件

JSZip還支持處理多個文件，並將其放到同一個zip文件中。以下代碼展示了如何處理多個文件並將其打包到同一個zip文件中：

const zip = new JSZip()

zip.file("file1.txt", "Content of file1.txt")
zip.file("file2.txt", "Content of file2.txt")

zip.generateAsync({ type: "blob" })
.then(function(content) {
  // 下載zip文件
  saveAs(content, "myZip.zip")
})

在上面的代碼中，我們創建了一個JSZip實例，並使用file()方法向zip文件中添加了兩個文件。最後將zip文件內容生成為Blob並保存。

五、文件夾操作

JSZip支持對文件夾進行操作，並按照層次結構創建文件夾。以下是創建文件夾並添加文件的代碼示例：

const zip = new JSZip()

const folder = zip.folder("myFolder")

folder.file("file1.txt", "Content of file1.txt")
folder.file("file2.txt", "Content of file2.txt")

zip.generateAsync({ type: "blob" })
.then(function(content) {
  // 下載zip文件
  saveAs(content, "myZip.zip")
})

在上面的代碼中，我們首先使用folder()方法創建一個名為”myFolder”的文件夾，然後在該文件夾中添加兩個文件”file1.txt”和”file2.txt”。最後將zip文件內容生成為Blob並保存。

六、總結

JSZip是一個用於處理.zip文件的JavaScript庫，它支持壓縮和解壓縮操作，並可以方便地創建、讀取和修改.zip文件。使用JSZip，我們可以從多個方面處理zip文件，包括創建和處理多個文件、處理文件夾和多層級文件夾。