JavaScript プログラミング

【Nodejs】JSzipでファイルダウンロード機能を実装する

この記事は約3分で読めます。

 

 

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

 

 

 

 


プログラミング・スクレイピングツール作成の相談を受け付けています!

クラウドワークス・ココナラ・MENTAなどでPython・SQL・GASなどのプログラミングに関する相談やツール作成などを承っております!

過去の案件事例:

  • Twitter・インスタグラムの自動化ツール作成
  • ウェブサイトのスクレイピングサポート
  • ダッシュボード・サイト作成
  • データエンジニア転職相談

これまでの案件例を見る

キャリア相談もお気軽に!文系学部卒からエンジニア・データサイエンティストへの転職経験をもとに、未経験者がどう進むべきかのアドバイスを提供します。


スポンサーリンク
/* プログラミング速報関連記事一覧表示 */
ミナピピンの研究室

コメント

タイトルとURLをコピーしました