jQueryでzipを解凍読み込みするには？

質問

ウェブサーバーにあるCSVの内容をクライアントで見るため、jQueryを使い、

　　$.get('data.csv', function(data) {
　　　　var csv = $.csv()(data);
　　　　$(csv).each(function(index) {
　　　　　　// 読み込んだデータを処理
　　　　　　// 　　　　：
　　　　});
　　});

のようなことをしています。

最近CSVファイルの容量が大きくなってきて、
ウェブサーバーにCSVをFTPアップロードするのに時間がかかるようになったため、
CSVをZIP圧縮して上げることとなりました。

そこでクライアント側でも、

　　$.get('data.csv', function(data) {

の部分のファイル名をZIPファイルのものにして、

　　$.get('data.zip', function(data) {

として、ZIPファイルを読み込むように修正しました。
その結果、ZIPファイルの内容はdataに読み込まれているようです。
しかし、ここからどうやって解凍してやればいいか分かりません。

ZIP解凍をウェブで検索していろいろと試してみたのですが、
うまく動作しなかったり、使い方が分からなかったりでした。。
それぞれどういう結果でうまく動作しなかったのかをここできちんと書くのは難しいですが、
例えば、以下のようなものです。
http://d.hatena.ne.jp/end0tknr/20110109/1294582088
http://polygon-planet-log.blogspot.jp/2012/04/ja …
https://github.com/shogo82148/zipjs
http://www.onicos.com/staff/iz/amuse/javascript/ …

要は、上記のように、

　　$.get('data.zip', function(data) {

によってダウロードされてメモリ上にロードされたZIPファイルの中身がdataにあるので、
これを解凍したいということなのですが、
なにか良い方法はありませんでしょうか。

よろしくお願い致します。

回答No.2

Taiyonoshizuku · ベストアンサー

んー、jquery.zip.jsを読み込んで
$(function(){
$.get('test.zip', function(archive){
console.debug(archive.files);
for (var i in archive.files){
var file = archive.files[i];
console.log('=========');
console.log(file.name);
console.log(file.filesize);
console.log(file.inflate());
}})
});
これを試しただけでfile.inflate()でcsvの中身が表示されたけど。

お礼

JSZip を使ってできました。
結局別の方法で実現することになりましたが、
回答いただきましてありがとうございました。

ちなみに JSZip は公式サイトの情報も豊富で、
とっつきやすかったです。

補足

Taiyonoshizuku 様

重ねて回答をありがとうございます。

動くところでは問題なく動くのですね。

当方、サンプルの test.html を今回提示いただいたソースに置き換えて、

　$(function(){
　　　test_get('./test_utf8.zip')
　})

　function test_get(filepath)
　{
　　　$.get(filepath, function(archive){
　　　　　console.debug(archive.files);
　　　　　for (var i in archive.files){
　　　　　　　var file = archive.files[i];
　　　　　　　console.log('=========');
　　　　　　　console.log(file.name);
　　　　　　　console.log(file.filesize);
　　　　　　　console.log(file.inflate());
　　　　　}
　　　})
　}

のような感じにしてみてデバッガで実行してみたところ、
$.get(filepath, function(archive) までは来るのですが、
中に入らず、console.debug(archive.files); が実行されることなしに抜けてしまいます。

さきほど気がついたのですが、エラーが上がっていました。

「
RangeError: invalid array length
...".replace(/~(..)/g,function(A,E){return Array(parseInt(E,36)+1).join(" ")});Stri...
」

だそうで、これは jquery.zip.js 中の、文字データの直後にある文でした。

何か環境が悪いのかもしれません。

もうしばらくテストしてみたいと思います。

ありがとうございます。

回答No.1

Taiyonoshizuku

http://d.hatena.ne.jp/yatt/20110629/1309353151
参考にどうぞ

補足

回答いただきまして、ありがとうございます。

早速公開されているデモをテストしていました。

test.html を表示させると、
test_get('./test_utf8.zip') が呼ばれ、
その中の $.get(filepath, function(zip){ で zip にデータがダウンロードされるところまでは動作するのですが、
for (var name in zip.files) で zip.files が undefined のため、
なにも動作しません。

この zip.files は、圧縮したファイル名なのかなと思い
（例えば、data.csv を圧縮して data.zip を作成した場合は data.csv）、
強引にファイル名を指定してみるも、
次の addentry() で zip.files[name] に失敗してしまいます。
（そりゃそうですよね...。）

結果からすると、これも動作しませんでした。

私の実行の仕方に問題があるのかも知れませんが、
正直スキルがそこまでスキルが高くなくて分かりませんでした。

また何かヒントがありましたら、よろしくお願い致します。