作成日:  (更新日: )

JSZip のスニペット集

このページは、JSZip, JSZipUtils のスニペットなどをまとめる予定のページです。

目次

注意

  • コードのライセンスは CC0 (クレジット表示不要、改変可、商用可) です。
  • await がついているコードは async 関数内で実施してください。((async () => { })() 内など)
  • node.js や Webpack で使用する場合は、下記のようにインストールしてから使用してください。
インストール
npm install jszip
npm install jszip-utils
使用 (import)
import JSZip from 'jszip';
import JSZipUtils from 'jszip-utils';
使用 (require)
const JSZip = require('jszip');
const JSZipUtils = require('jszip-utils');

スニペット

ZIP ファイルにテキストファイルを追加

const zip = new JSZip();
zip.file('hello.txt', 'Hello !'); // テキストファイルの追加
zip.file('folder1/hello.txt', 'Hello !'); // テキストファイルの追加 (下層フォルダに追加)

ZIP ファイルに外部ファイルを追加

async/await なし
const zip = new JSZip();
// 画像ファイルのバイナリデータを取得
JSZipUtils.getBinaryContent('image.png').then(function(err, image){
    if (err) throw err;
    zip.file('image.png', image, { binary: true }); // 画像ファイルの追加
});
async/await あり
const zip = new JSZip();
const image = await JSZipUtils.getBinaryContent('image.png'); // 画像ファイルのバイナリデータを取得
zip.file('image.png', image, { binary: true }); // 画像ファイルの追加

ZIP のダウンロード

  • downloadBlob() は JavaScript DOM のスニペット集 にある、ブラウザから Blob をダウンロードする関数です。他のライブラリ等を使用してもよいです。
  • zip は JSZip オブジェクトです。
async/await なし
zip.generateAsync({ type: 'blob' }).then(function(blob){ // Blob の取得
    downloadBlob(blob); // ダウンロード
});
async/await あり
const blob = await zip.generateAsync({ type: 'blob' }); // Blob の取得
downloadBlob(blob); // ダウンロード

ZIP の読み込み (<input type=file> から)

async/await なし (file1 = ファイル選択欄)
file1.addEventListener('change', function(e){
    const f = e.target.files[0];
    JSZip.loadAsync(f).then(function(zip){ // ZIP の読み込み
        return zip.files['hello.txt'].async('text'); // テキストファイルの読み込み
    }).then(function(text){
        // console.log(text);
    })
});
async/await あり (file1 = ファイル選択欄)
file1.addEventListener('change', function(e){
    const f = e.target.files[0];
    const zip = await JSZip.loadAsync(f); // ZIP の読み込み
    const text = await zip.files['hello.txt'].async('text'); // テキストファイルの読み込み

    // console.log(text);
});