JavascriptでのZIP生成&ファイルダウンロード
Nodejs系でユーザーにダウンロードさせたいファイルをまとめてZIPにボタンをクリックすると<a>タグを発火させてファイルダウンロードが始まる的な機能を実装する方法はアカイバーを使ったり色々あるが、個人的にはJszipが一番使いやすかったので使い方をメモしておきます。
# JSZIPのインストール npm install jszip
# 必要なライブラリを読み込む
import { Buffer } from 'buffer';
import * as JSZip from 'jszip';
file_export(): void{
# zipに書き込むデータ(実際はAPIなどから取得する/画像の場合はbase64で返ってくることを想定)
let data = '44GT44KT44Gr44Gh44Gv44Gb44GL44GE'
let csv = '1,2,3,4,5,6,'
# インスタンス生成
let zip = new JSZip();
# ZIP生成
zip.file('export.csv', Buffer.from(csv, 'base64').toString());
for (var i = 0; i < 100; i++) {
zip.file(`export_${i}.jpg`, Buffer.from(data, 'base64').toString());
}
let content = await zip.generateAsync({ type: 'blob' })
# aタグを生成→クリックで発火処理を実装
let link = document.createElement('a');
link.href = window.URL.createObjectURL(content);
link.download = 'test.zip';
link.click();
}
モダンなjsでは演算子awaitを付けておくと、非同期処理の中でも同期的に処理するようになるみたいです。非同期処理というと.thenでごちゃごちゃやるイメージだったんですけどいつの間にか時代は変わっていたみたいです。

コメント