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でごちゃごちゃやるイメージだったんですけどいつの間にか時代は変わっていたみたいです。
コメント