純粋なフロントエンドJSzipパッケージファイルとダウンロード

1.事件の原因

以前にSVGSprites復元ツールを作成し（マージされたSVG Spritesファイルをアップロードして独立した小さなSVGに分解）、ユーザーからのフィードバックの後、パッケージのダウンロード機能を追加したいと考えています。

それから私はそれを研究しました、それは非常に興味深いです、そしてそれは次の図に示されているように現在オンラインです：

ZIPパッケージのダウンロード回路図

その後、ダウンロードできます。以下は、見つかったダウンロードレコードです。

ダウンロード記録

2.ZIPパッケージのダウンロードを実装する方法

jszipプロジェクトを使用して実現：https：//github.com/Stuk/jszip

圧縮および非圧縮のJSファイルはdistディレクトリにあり、自分でダウンロードできます。

使い方もとても簡単です。

JSを紹介する

<script src = "./ jszip.min.js"> </ script>

パッケージングとダウンロードを実行します

以下は公式コードです、私はより詳細なコメントを追加しました：

// zipパッケージオブジェクトを初期化します
varzip = new JSZip（）; 
//パッケージに使用するHello.txtという名前のファイルを作成します
zip.file（ "Hello.txt"、 "Hello World \ n"）; //
作成imagesという名前の新しいファイルディレクトリ
varimg = zip.folder（ "images"）; 
//この画像ファイルディレクトリにimgDataとしてbase64データを使用して画像を作成します。画像名は
smile.gifimg.file（ "smile.gif" 、imgData、{base64：true}）; 
//パッケージ化されたコンテンツを非同期でblobバイナリ形式に変換します
zip.generateAsync（{type： "blob"}）。then（function（content）{ 
    //コンテンツはblobデータであり、ここからダウンロードされますexample.zipという名前で    
    //FileSaver.js   
    saveAs（content、 "example.zip"）; 
}）; 

/ *
最終的にダウンロードされたzipファイルには次のコンテンツが含まれています：
Hello.txt 
images / 
    smile.gif 
* /

使い方はとても簡単で、公式の説明もわかりやすいです。変更を直接フォローして効果が出ました。

その中でも、非常に有名なプロジェクトであるFileSaver.jsが紹介されており、紹介することができます。

3つの純粋なフロントエンドダウンロードFileSaver.js

FileSaver.jsプロジェクトのアドレスは次のとおりです：https：//github.com/eligrey/FileSaver.js/

圧縮および非圧縮のJSファイルもdistディレクトリにあり、自分でダウンロードできます。

使用上のヒント：

<script src = "./ FileSaver.min.js"> </ script> 
<script> 
var canvas = document.getElementById（ "zxx-canvas"）; 
canvas.toBlob（function（blob）{ 
    saveAs（blob、 "example.png"）; 
}）; 
</ script>

FileSaver.jsは非常に強力で、IE10 +と互換性があるだけでなく、大きなファイルのダウンロードもサポートしています。2GBのファイルでもChromeブラウザでダウンロードできます。

js-xlsxを使用したFileSaver.jsは、純粋なフロントエンドからExcelファイルをダウンロードすることもできます。DOCファイルを生成する場合は、このプロジェクトを試してください。

この記事の焦点ではないため、拡張されません。

さらに、多くの純粋なフロントエンドのダウンロード方法があります。興味がある場合は、次の記事を参照してください。「これは、これまでに見た中で最も完全なフロントエンドのダウンロードの概要です。」

4、私のjszip使用法の概略図

私の要件は、SVGコードとIDデータ（ファイル名として使用できます）が既に含まれている一連のSVGファイルをパッケージ化してダウンロードすることです。

私のダウンロード機能はIEブラウザと互換性がある必要がないので<a>、HTML5ダウンロード属性に基づいて要素ダウンロードを直接使用します。

したがって、次のコードがあります。

//データは配列です
//配列アイテムの構造{id： "icon-xxx"、svgHTML： "<svg> ..."} 
var zip = new JSZip（）; 
data.forEach（function（obj）{ 
  // zipパッケージはsvgファイルを詰め込み続けます
  zip.file（obj.id + '。svg'、obj.svgHTML）; 
}）; 
// zipファイルを生成し、
zip.generateAsync（{ 
  type： 'blob' 
}）。then（ function（content）{ 
  //ダウンロードされたファイル名
  var filename = key + '。zip'; 
  //非表示のダウンロード可能なリンクを作成します
  vareleLink = document.createElement（ 'a'）; 
  eleLink.download = filename; 
  eleLink.style。 display = 'none'; 
  //ダウンロードされたコンテンツはblobアドレスに
  変換されますeleLink.href = URL.createObjectURL（content）; 
  //
  ドキュメントをクリックするトリガー。body.appendChild（eleLink）;
  eleLink.click（）;
  //次に削除し
  document.body.removeChild（eleLink）; 
}）;

5、迅速な結論

今後も同様のニーズが発生することが予想されるため、ヒントをまとめて記録し、ちなみに他のダウンロード関連コンテンツも記録しました。

ちなみに、同じようなニーズを持つ他の友達を助けられることを願っています。