我一直在使用JSZip来读取和编写Javascript中的zip文件。
我要做的是从input[type=file]的zip文件中加载压缩的Web应用程序（index.html，style.css，图像文件以及用户对其Web应用程序所需的任何其他内容） element（我正在使用FileReader读取zip文件的内容并在页面上显示文件/文件夹）
// Show contents
var $result = $(".result");
$("#file").on("change", function(evt) {
// remove content
$result.html("");
// be sure to show the results
$(".result_block").removeClass("hide");
// see http://www.html5rocks.com/en/tutorials/file/dndfiles/
var files = evt.target.files;
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
var $title = $("<h4>", {
text : theFile.name
});
$result.append($title);
var $fileContent = $("<ul>");
try {
var dateBefore = new Date();
// read the content of the file with JSZip
var zip = new JSZip(e.target.result);
var dateAfter = new Date();
$title.append($("<span>", {
text:" (parsed in " + (dateAfter - dateBefore) + "ms)"
}));
$(".check").removeClass("hide");
// that, or a good ol' for(var entryName in zip.files)
$.each(zip.files, function (index, zipEntry) {
$fileContent.append($("<li>", {
text : zipEntry.name
}));
// the content is here : zipEntry.asText()
});
// end of the magic !
} catch(e) {
$fileContent = $("<div>", {
"class" : "alert alert-danger",
text : "Error reading " + theFile.name + " : " + e.message
});
}
$result.append($fileContent);
}
})(f);
// read the file !
// readAsArrayBuffer and readAsBinaryString both produce valid content for JSZip.
reader.readAsArrayBuffer(f);
$(".check").removeClass("hide").addClass("hide");
// reader.readAsBinaryString(f);
}
});
然后，当我点击说出Linux图标时，我想将我的网络应用程序导出为原生Linux应用程序。我是使用JSZipUtils / JSZip执行此操作的。我正在加载一个名为YourLinApp.zip的zip文件，其中包含用户将其Web应用程序作为本机Linux应用程序运行所需的所有文件。这个zip文件中缺少的只是它们的源代码。
我使用以下函数触发它......
// Download as Linux App
$(".export-as-lin-app").on("click", function() {
JSZipUtils.getBinaryContent("YourLinApp.zip", function(err, data) {
if(err) {
throw err; // or handle err
}
var zip = new JSZip(data);
// Your Web App
zip.file("source.c", "/*\n Save this file as main.c and compile it using this command\n (those are backticks, not single quotes):\n gcc -Wall -g -o main main.c `pkg-config --cflags --libs gtk+-2.0 webkit-1.0` -export-dynamic\n \n Then execute it using:\n ./main\n \n If you can't compile chances are you don't have gcc installed.\n Install gcc/c with the following terminal command. (This command is for Debian based Linux distros)\n sudo apt-get install libgtk2.0-dev libgtk2.0-doc libglib2.0-doc\n \n WebKit requires libraries to successfully aquire, configure, and compile. You can get libraries by issuing the following command in your terminal:\n sudo apt-get install subversion gtk-doc-tools autoconf automake libtool libgtk2.0-dev libpango1.0-dev libicu-dev libxslt-dev libsoup2.4-dev libsqlite3-dev gperf bison flex libjpeg62-dev libpng12-dev libxt-dev autotools-dev libgstreamer-plugins-base0.10-dev libenchant-dev libgail-dev\n \n Ubuntu Webkit information - https://help.ubuntu.com/community/WebKit\n sudo apt-get install libwebkitgtk-dev python-webkit-dev python-webkit\n \n Required dependencies for this build: (If you installed all the above this is not needed)\n sudo apt-get install libgtk2.0-dev libgtk2.0-doc libglib2.0-doc subversion gtk-doc-tools autoconf automake libtool libgtk2.0-dev libpango1.0-dev libicu-dev libxslt-dev libsoup2.4-dev libsqlite3-dev gperf bison flex libjpeg62-dev libpng12-dev libxt-dev autotools-dev libgstreamer-plugins-base0.10-dev libenchant-dev libgail-dev libwebkitgtk-dev\n*/\n\n#include <limits.h>\n#include <gtk/gtk.h>\n#include <webkit/webkit.h>\n\nstatic GtkWidget* window;\nstatic WebKitWebView* web_view;\n\nstatic void destroy_cb (GtkWidget* widget, gpointer data) {\n gtk_main_quit();\n}\n\nstatic GtkWidget* create_browser() {\n GtkWidget* scrolled_window = gtk_scrolled_window_new (NULL, NULL);\n gtk_scrolled_window_set_policy (GTK_SCROLLED_WINDOW (scrolled_window), GTK_POLICY_AUTOMATIC, GTK_POLICY_AUTOMATIC);\n\n web_view = WEBKIT_WEB_VIEW (webkit_web_view_new ());\n gtk_container_add (GTK_CONTAINER (scrolled_window), GTK_WIDGET (web_view));\n\n return scrolled_window;\n}\n\nint main (int argc, char* argv[]) {\n gtk_init (&argc, &argv);\n\n GtkWidget* vbox = gtk_vbox_new (FALSE, 0);\n gtk_box_pack_start (GTK_BOX (vbox), create_browser(), TRUE, TRUE, 0);\n\n GtkWidget* window = gtk_window_new (GTK_WINDOW_TOPLEVEL);\n gtk_window_set_default_size (GTK_WINDOW (window), 800, 560);\n gtk_widget_set_name (window, \"" + $('.projectname').val() + "\");\n /* gtk_window_set_icon_from_file(window, \"app/logo.png\", NULL); */\n g_signal_connect (G_OBJECT (window), \"destroy\", G_CALLBACK (destroy_cb), NULL);\n gtk_container_add (GTK_CONTAINER (window), vbox);\n \n char uri[PATH_MAX];\n char cwd[PATH_MAX];\n\n getcwd(cwd, sizeof(cwd));\n\n if (argc > 1)\n snprintf(uri, sizeof(uri), \"%s\", argv[1]);\n else\n snprintf(uri, sizeof(uri), \"file://%s/" + $('.projectname').val() + "/app/index.html\", cwd);\n \n webkit_web_view_open (web_view, uri);\n\n gtk_widget_grab_focus (GTK_WIDGET (web_view));\n gtk_widget_show_all (window);\n gtk_main ();\n\n return 0;\n}\n");
zip.file("README", "This application for Linux relies on the following dependencies...\n sudo apt-get install subversion gtk-doc-tools autoconf automake libtool libgtk2.0-dev libpango1.0-dev libicu-dev libxslt-dev libsoup2.4-dev libsqlite3-dev gperf bison flex libjpeg62-dev libpng12-dev libxt-dev autotools-dev libgstreamer-plugins-base0.10-dev libenchant-dev libgail-dev\n\nIf kodeWeave was at all helpful for you. Would you consider donating to the project?\nhttps://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=BSYGA2RB5ZJCC\n\n");
var content = zip.generate({type:"blob"});
saveAs(content, "lin-export.zip");
return false;
});
});
我的问题是将他们的源代码与新的zip文件合并，同时仍然可以使用JSZip自由地将文件添加到zip文件中。
我知道JSZip can read zip files，但无法满足我的需求。
我可以使用zip.file(name, code)将文件添加到已加载的zip文件中，也可以将文件（using zip.file(name, code)）添加到我用来将网络应用转换为桌面应用的zip文件的数据中。这里的问题是它不会加载来自input[type=file] aka FileReader的文件。
这是我的jQuery / JavaScript：
$(document).ready(function() {
// Detect if users browser can load and download files in Javascript
if (window.File && window.FileReader && window.FileList && window.Blob) {
// Detect if users browser can download files in Javascript
} else {
alert("The File APIs are not fully supported in this browser.");
}
// Show error if zip is corrupted
if (!window.FileReader || !window.ArrayBuffer) {
$(".error_block").removeClass("hide");
return;
}
// Show contents
var $result = $(".result");
$("#file").on("change", function(evt) {
// remove content
$result.html("");
// be sure to show the results
$(".result_block").removeClass("hide");
// see http://www.html5rocks.com/en/tutorials/file/dndfiles/
var files = evt.target.files;
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
var $title = $("<h4>", {
text : theFile.name
});
$result.append($title);
var $fileContent = $("<ul>");
try {
var dateBefore = new Date();
// read the content of the file with JSZip
var zip = new JSZip(e.target.result);
var dateAfter = new Date();
$title.append($("<span>", {
text:" (parsed in " + (dateAfter - dateBefore) + "ms)"
}));
$(".check").removeClass("hide");
// that, or a good ol' for(var entryName in zip.files)
$.each(zip.files, function (index, zipEntry) {
$fileContent.append($("<li>", {
text : zipEntry.name
}));
// the content is here : zipEntry.asText()
});
// end of the magic !
} catch(e) {
$fileContent = $("<div>", {
"class" : "alert alert-danger",
text : "Error reading " + theFile.name + " : " + e.message
});
}
$result.append($fileContent);
// Download as Linux App
$(".export-as-lin-app").on("click", function() {
JSZipUtils.getBinaryContent("YourLinApp.zip", function(err, data) {
if(err) {
throw err; // or handle err
}
var zip = new JSZip(data);
// Your Web App
zip.file("source.c", "/*\n Save this file as main.c and compile it using this command\n (those are backticks, not single quotes):\n gcc -Wall -g -o main main.c `pkg-config --cflags --libs gtk+-2.0 webkit-1.0` -export-dynamic\n \n Then execute it using:\n ./main\n \n If you can't compile chances are you don't have gcc installed.\n Install gcc/c with the following terminal command. (This command is for Debian based Linux distros)\n sudo apt-get install libgtk2.0-dev libgtk2.0-doc libglib2.0-doc\n \n WebKit requires libraries to successfully aquire, configure, and compile. You can get libraries by issuing the following command in your terminal:\n sudo apt-get install subversion gtk-doc-tools autoconf automake libtool libgtk2.0-dev libpango1.0-dev libicu-dev libxslt-dev libsoup2.4-dev libsqlite3-dev gperf bison flex libjpeg62-dev libpng12-dev libxt-dev autotools-dev libgstreamer-plugins-base0.10-dev libenchant-dev libgail-dev\n \n Ubuntu Webkit information - https://help.ubuntu.com/community/WebKit\n sudo apt-get install libwebkitgtk-dev python-webkit-dev python-webkit\n \n Required dependencies for this build: (If you installed all the above this is not needed)\n sudo apt-get install libgtk2.0-dev libgtk2.0-doc libglib2.0-doc subversion gtk-doc-tools autoconf automake libtool libgtk2.0-dev libpango1.0-dev libicu-dev libxslt-dev libsoup2.4-dev libsqlite3-dev gperf bison flex libjpeg62-dev libpng12-dev libxt-dev autotools-dev libgstreamer-plugins-base0.10-dev libenchant-dev libgail-dev libwebkitgtk-dev\n*/\n\n#include <limits.h>\n#include <gtk/gtk.h>\n#include <webkit/webkit.h>\n\nstatic GtkWidget* window;\nstatic WebKitWebView* web_view;\n\nstatic void destroy_cb (GtkWidget* widget, gpointer data) {\n gtk_main_quit();\n}\n\nstatic GtkWidget* create_browser() {\n GtkWidget* scrolled_window = gtk_scrolled_window_new (NULL, NULL);\n gtk_scrolled_window_set_policy (GTK_SCROLLED_WINDOW (scrolled_window), GTK_POLICY_AUTOMATIC, GTK_POLICY_AUTOMATIC);\n\n web_view = WEBKIT_WEB_VIEW (webkit_web_view_new ());\n gtk_container_add (GTK_CONTAINER (scrolled_window), GTK_WIDGET (web_view));\n\n return scrolled_window;\n}\n\nint main (int argc, char* argv[]) {\n gtk_init (&argc, &argv);\n\n GtkWidget* vbox = gtk_vbox_new (FALSE, 0);\n gtk_box_pack_start (GTK_BOX (vbox), create_browser(), TRUE, TRUE, 0);\n\n GtkWidget* window = gtk_window_new (GTK_WINDOW_TOPLEVEL);\n gtk_window_set_default_size (GTK_WINDOW (window), 800, 560);\n gtk_widget_set_name (window, \"" + $('.projectname').val() + "\");\n /* gtk_window_set_icon_from_file(window, \"app/logo.png\", NULL); */\n g_signal_connect (G_OBJECT (window), \"destroy\", G_CALLBACK (destroy_cb), NULL);\n gtk_container_add (GTK_CONTAINER (window), vbox);\n \n char uri[PATH_MAX];\n char cwd[PATH_MAX];\n\n getcwd(cwd, sizeof(cwd));\n\n if (argc > 1)\n snprintf(uri, sizeof(uri), \"%s\", argv[1]);\n else\n snprintf(uri, sizeof(uri), \"file://%s/" + $('.projectname').val() + "/app/index.html\", cwd);\n \n webkit_web_view_open (web_view, uri);\n\n gtk_widget_grab_focus (GTK_WIDGET (web_view));\n gtk_widget_show_all (window);\n gtk_main ();\n\n return 0;\n}\n");
zip.file("README", "This application for Linux relies on the following dependencies...\n sudo apt-get install subversion gtk-doc-tools autoconf automake libtool libgtk2.0-dev libpango1.0-dev libicu-dev libxslt-dev libsoup2.4-dev libsqlite3-dev gperf bison flex libjpeg62-dev libpng12-dev libxt-dev autotools-dev libgstreamer-plugins-base0.10-dev libenchant-dev libgail-dev\n\nIf kodeWeave was at all helpful for you. Would you consider donating to the project?\nhttps://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=BSYGA2RB5ZJCC\n\n");
var content = zip.generate({type:"blob"});
saveAs(content, "lin-export.zip");
return false;
});
});
}
})(f);
// read the file !
// readAsArrayBuffer and readAsBinaryString both produce valid content for JSZip.
reader.readAsArrayBuffer(f);
$(".check").removeClass("hide").addClass("hide");
// reader.readAsBinaryString(f);
}
});
return false;
});
答案 0 :(得分：3)
JSZip.load合并内容：如果您加载了给定的zip文件，则YourLinApp.zip将合并内容。
// read the content with a FileReader
var originalZipContent = e.target.result;
// ...
$(".export-as-lin-app").on("click", function() {
JSZipUtils.getBinaryContent("YourLinApp.zip", function(err, data) {
// merge two files
var zip = new JSZip();
zip.load(data);
zip.load(originalZipContent)
var content = zip.generate({type:"blob"});
saveAs(content, "lin-export.zip");
}
});
有关工作示例，请参阅this commit。