我想实现从服务器压缩 .exe 文件，而有人使用复选框下载文件，但不是重点。试图了解 jszip 是如何工作的。但我有一些问题：下载器示例无法正常工作。我从https://stuk.github.io/jszip/documentation/examples/downloader.html中举一个例子，删除一些多余的功能，如样式、链接等。几乎所有的运行都是正确的，除了块：
JSZipUtils.getBinaryContent(url, function ( err, data) {..}
- 此部分不执行，它给了我一个错误：
“错误：InvalidStateError：无法从 'XMLHttpRequest' 读取 'responseText' 属性：该值仅在对象的 'responseType' 时才可访问'是'或'文本'（是'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