Javascript Jszip和jquery问题
我想实现从服务器压缩.exe文件，而有人使用复选框下载文件，但不是重点。试图理解jszip是如何工作的。 但我有一些问题：downloader示例无法正常工作。 我举了一个例子，删除了一些多余的特性，比如样式、链接等。 除了block:Javascript Jszip和jquery问题,javascript,jquery,html,jszip,Javascript,Jquery,Html,Jszip,我想实现从服务器压缩.exe文件，而有人使用复选框下载文件，但不是重点。试图理解jszip是如何工作的。 但我有一些问题：downloader示例无法正常工作。 我举了一个例子，删除了一些多余的特性，比如样式、链接等。 除了block:JSZipUtils.getBinaryContent（url，函数（err，data）{..}之外，几乎所有的运行都是正确的 -此部分不执行，它给了我一个错误：错误：InvalidStateError:无法从'XMLHttpRequest'读取'response
JSZipUtils.getBinaryContent（url，函数（err，data）{..}之外，几乎所有的运行都是正确的 -此部分不执行，它给了我一个错误：
错误：InvalidStateError:无法从'XMLHttpRequest'读取'responseText'属性：仅当对象的'responseType'为'text'或'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>
- -根文件夹：
- 1.html
- 子文件夹“dist”：
- demo.js
- FileSaver.js
- jquery-1.8.3.min.js
- jszip.js
- jszip-utils.js
- 子文件夹“dist”：
- 1.html
- 解决了我的问题。
问题是html文件是使用文件：//协议在本地计算机上的浏览器中打开的。为了正确工作，它应该使用http协议
因此，我下载apache服务器，在我的pc上运行，并在apache服务器上启动正常工作的html文件。“不工作”不是问题描述（已更正并更新问题描述）
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;
});
});