JavaScript 建立 zip 壓縮檔 示範

先使用 CDN 引用套件：

    
    <script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>
    

最簡單建立包含文字檔的 zip 壓縮檔範例

    
const zip = new JSZip();

zip.file("Hello.txt", "Hello World\n");

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

在 zip 壓縮檔中建立資料夾

    
const zip = new JSZip();

zip.folder("empty_folder") // 建立空的資料夾

const myFolder = zip.folder("myFolder"); // 建立 myFolder 資料夾
myFolder.file("Hello.txt", "Hello World\n"); // 將文字檔放入 myFolder 資料夾中

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

透過圖片連結取得圖片，並加入到 zip 壓縮檔

    
const zip = new JSZip();

const imageUrl = "https://picsum.photos/200/300";

fetch(imageUrl)
    .then(res => res.blob())
    .then(blob => {
        zip.file("image.png", blob, {base64: true});

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

    

參考資料：
jsDelivr - jszip
jsDelivr - file-saver
npm - file-saver