web-dev-qa-db-ja.com

JavaScriptを使用してファイルを圧縮する方法

JavaScriptを使用してファイルをZipする方法はありますか？たとえば、Yahooメールのように、電子メールからすべての添付ファイルをダウンロードすることを選択した場合、1つのZipファイルに圧縮されてダウンロードされます。 JavaScriptはそれを実行できますか？その場合、コーディング例を提供してください。

このライブラリは jszip という名前でタスクを実行するために見つかりましたが、既知の未解決の問題があります。

どうすれば問題を解決できますか？

javascriptzipzipfile
21
Isuru

JSZipは長年にわたって更新されています。 そのGitHubリポジトリ で見つけることができます

FileSaver.js と一緒に使用できます

Npmを使用してインストールできます。

npm install jszip --save
npm install file-saver --save

そして、それらをインポートして使用します。

import JSZip from 'jszip';
import FileSaver from 'file-saver';

let Zip = new JSZip();
Zip.file("idlist.txt", `PMID:29651880\r\nPMID:29303721`);
Zip.generateAsync({type: "blob"}).then(function(content) {
  FileSaver.saveAs(content, "download.Zip");
});

次に、download.ZipというZipファイルをダウンロードします。解凍すると、idlist.txtというファイルの中に2行あります。

PMID:29651880
PMID:29303721

参考までに、私は次のブラウザでテストし、すべて合格しました：

  • Firefox 59.0.2（Windows 10）
  • Chrome 65.0.3325.181（Windows 10）
  • Microsoft Edge 41.16299.371.0（Windows 10）
  • Internet Explorer 11.0.60（Windows 10）
  • Opera 52（Mac OSX 10.13）
  • Safari 11（Mac OSX 10.13）
12
Yuci

画像を含むNode's組み込みライブラリZlibを使用することをお勧めします。 「バッファ」を使用してbase 64でエンコードします。 npmパッケージを使用するのではなく。理由：

  • ZlibはNodeネイティブライブラリ-現在約10年間最新の状態に保たれているため、長期的なサポートの証明
  • ノードではバッファを操作できます-つまり、テキスト文字列/画像を未加工のバイナリデータに変換し、Zlibで圧縮することができます
  • 簡単に大きなファイルを圧縮および解凍-ノードストリームを利用してファイルをMBまたはGBで圧縮します

Jszipを使用しているという事実により、ノードだけでなくnpmも使用していると推測できます。環境が正しく設定されていること、つまりノードがグローバルにインストールされていることを前提としています。

例：input.txt圧縮されてinput.txt.gz

const zlib = require('zlib');
const fs = require('fs');
const gzip = zlib.createGzip();
const input = fs.createReadStream('input.txt');
const output = fs.createWriteStream('input.txt.gz');

input.pipe(gzip).pipe(output);

ステップ1：したがって、ノードからの各ネイティブモジュールをrequire必要-ES5の一部が必要です。前述のZlib、およびfsモジュール、ファイルシステムモジュール。

const zlib = require('zlib');
const fs = require('fs');

ステップ2：fsモジュール。これによりreadstreamを作成でき、データのチャンクを読み取るために特別に呼び出されます。 readstreamオブジェクトを返します。読み取り可能なストリーム

const input = fs.createReadStream(FILE PATH HERE);

__注：このreadstreamオブジェクトは再びパイプ処理されます。 readteamオブジェクト上のパイプのこのチェーンは無限に発生する可能性があり、パイプを非常に柔軟にします。

ReadStream.pipe(DoesSomething).pipe(SomethingElse).pipe(ConvertToWriteStream)

ステップ3：パイプで圧縮されたreadstreamオブジェクトは、writestreamオブジェクトに変換されます。

const output = fs.createWriteStream('input.txt.gz');

input.pipe(gzip).pipe(output); // returned filename input.txt.gz, within local directory

したがって、このライブラリを使用すると、ファイルパスを簡単に入力し、圧縮ファイルをどこに置くかを決定できます。必要に応じて、逆を行うこともできます。

2
A. Tran

新しいHTML5ファイルAPIと型付き配列を使用すると、JavaScriptで必要なほとんどすべての操作を実行できます。ただし、ブラウザのサポートは素晴らしいものにはなりません。それがあなたが「未解決の問題」によって意味したものだと私は推測している。当面は、サーバー上で実行することをお勧めします。たとえば、PHPでは this extension。 を使用できます。

1
Alex Turpin

JSZIPを使用して、JavaScriptでZipファイルを生成およびダウンロードできます。そのためには、以下の手順に従う必要があります

  1. http://github.com/Stuk/jszip/zipball/master からjszip Zipファイルをダウンロードします
  2. Zipを抽出し、distフォルダー内のjszip.jsファイルを見つけます

  3. 以下のようにhtmlファイルにjszip.jsファイルをインポートします

    <script type="text/javascript" src="jszip.js"></script>

  4. コードに以下の関数を追加して呼び出します

    onClickDownload: function () {
    var Zip = new JSZip();
    for (var i = 0; i < 5; i++) {
        var txt = 'hello';
        Zip.file("file" + i + ".txt", txt);
    }
    Zip.generateAsync({
        type: "base64"
    }).then(function(content) {
        window.location.href = "data:application/Zip;base64," + content;
    });       
}

  5. こちらのgitリポジトリからサンプルコードをダウンロードできます（ GIT link ）

0
Sangeetharaj

JavaScriptはこれを行うことができますが、信頼できるクロスブラウザー方式ではありません。

ただし、これはサーバー側の言語で簡単に行うことができます。 PHP=に慣れている場合、PHPのZip関数のドキュメントは次のとおりです。 http://php.net/manual/en/book.Zip.php

0
Jasper