誰かがチェックボックスを使用してファイルをダウンロードしている間に、サーバーから.exeファイルを圧縮することを実現したいのですが、それは重要ではありません。jszip の仕組みを理解しようとしています。しかし、いくつかの問題があります。ダウンローダーの例が正しく機能しません。https://stuk.github.io/jszip/documentation/examples/downloader.htmlから例を取り、スタイルやリンクなどの余分な機能をいくつか削除します。ブロックを除いて、ほとんどすべてが正しく実行されます:
JSZipUtils.getBinaryContent(url, function ( err, data) {..}
- このセクションは実行されません。エラーが発生します:
"エラー: InvalidStateError: 'XMLHttpRequest' から 'responseText' プロパティを読み取れませんでした: オブジェクトの 'responseType ' is" または 'text'(was'arraybuffer')。
また、別の質問があります。スクリプト「demo.js」をヘッダー セクションに配置すると、ボタンを押してもスクリプトが実行されません。スクリプトはサイズが小さく、ヘッダーの読み込みが本文よりも速いため、ダウンロードする必要があります。スクリプトを含める最良の方法は、タグを閉じる前に、本文の最後に配置することです。しかし、すべてのスクリプトを本文の最後に配置すると、ボタンを押しても何も起こりません。なぜそのように機能するのですか？多くの記事を赤字にしましたが、答えが見つかりません。私はJSが初めてなので、私を激しく殴らないでください）。助けや提案をいただければ幸いです。
これは私の 1.html ファイルです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>something</title>
<script type="text/javascript" src="dist/jszip.js"></script>
<script type="text/javascript" src="dist/jszip-utils.js"></script>
<script type="text/javascript" src="dist/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="dist/FileSaver.js"></script>
</head>
<body>
<form action="#" id="download_form">
<ul>
<li>
<label>
<input type="checkbox" data-url="dist/jszip.js" checked />
dist/jszip.js
</label>
</li>
<li>
<label>
<input type="checkbox" data-url="dist/demo.js" checked />
dist/demo.js
</label>
</li>
<li>
<label>
<input type="checkbox" data-url="dist/FileSaver.js" />
dist/FileSaver.js
</label>
</li>
</ul>
<button type="submit" class="btn btn-primary">pack them !</button>
</form>
<script type="text/javascript" src="dist/demo.js"></script>
</body>
</html>
ここにdemo.jsがあります：
jQuery(function ($) {
"use strict";
/**
* Reset the message.
*/
function resetMessage () {
$("#result")
.removeClass()
.text("");
}
/**
* show a successful message.
* @param {String} text the text to show.
*/
function showMessage(text) {
resetMessage();
$("#result")
.addClass("alert alert-success")
.text(text);
}
/**
* show an error message.
* @param {String} text the text to show.
*/
function showError(text) {
resetMessage();
$("#result")
.addClass("alert alert-danger")
.text(text);
}
/**
* Fetch the content, add it to the JSZip object
* and use a jQuery deferred to hold the result.
* @param {String} url the url of the content to fetch.
* @param {String} filename the filename to use in the JSZip object.
* @param {JSZip} zip the JSZip instance.
* @return {jQuery.Deferred} the deferred containing the data.
*/
function deferredAddZip(url, filename, zip) {
var deferred = $.Deferred();
JSZipUtils.getBinaryContent(url, function (err, data) {
if(err) {
deferred.reject(err);
} else {
zip.file(filename, data, {binary:true});
deferred.resolve(data);
}
});
return deferred;
}
if(!JSZip.support.blob) {
showError("This demo works only with a recent browser !");
return;
}
var $form = $("#download_form").on("submit", function () {
alert("button press"); /* it works fine */
resetMessage();
var zip = new JSZip();
var deferreds = [];
// find every checked item
$(this).find(":checked").each(function () {
var $this = $(this);
var url = $this.data("url");
var filename = url.replace(/.*\//g, "");
deferreds.push(deferredAddZip(url, filename, zip));
});
// when everything has been downloaded, we can trigger the dl
// section below doesn't work at all - alerts used for simplest debugging
$.when.apply($, deferreds).done(function () {
//alert("downloading must start");
var blob = zip.generate({type:"blob"});
// see FileSaver.js
saveAs(blob, "example.zip");
showMessage("done !");
}).fail(function (err) {
showError(err);
});
return false;
});
});
ファイルを含む私のファイルフォルダーは次のようになります。
- -ルートフォルダ：
- 1.html
- サブフォルダー「dist」:
- デモ.js
- FileSaver.js
- jquery-1.8.3.min.js
- jszip.js
- jszip-utils.js
- サブフォルダー「dist」:
- 1.html