我正在使用JSZip在Electron中制作下载页面(文件下载,显示进度条,压缩文件),除非我压缩大文件,否则它工作正常。
对于小文件(小于25mb),它会在我单击按钮后立即开始,并显示压缩进度!
但是当我尝试压缩100mb,500mb或更多
它启动并在我单击按钮后很晚才显示进度
这是JSZip问题吗?还是我需要放置更多代码?
var Promise = window.Promise;
if (!Promise) {
Promise = JSZip.external.Promise;
}
/**
* Fetch the content and return the associated promise.
* @param {String} url the url of the content to fetch.
* @return {Promise} the promise containing the data.
*/
function urlToPromise(url) {
return new Promise(function(resolve, reject) {
JSZipUtils.getBinaryContent(url, function(err, data) {
if (err) {
reject(err);
} else {
resolve(data);
}
});
});
}
var $form = $("#download_form").on("submit", function() {
var zip = new JSZip();
// find every checked item
$(this).find(":checked").each(function() {
var $this = $(this);
var url = $this.data("url");
console.log(url);
var filename = url.replace(/.*\//g, "");
console.log(filename);
zip.file(filename, urlToPromise(url), {binary: true, createFolders: true});
});
// when everything has been downloaded, we can trigger the dl
// by streamFiles:true
zip.generateAsync({type: "blob", streamFiles:true}, function updateCallback(metadata) {
console.log(metadata.percent);
updateprocess(metadata.percent);
var msg = "progression : " + metadata.percent.toFixed(2) + " %";
if (metadata.currentFile) {
msg += ", current file = " + metadata.currentFile;
}
showMessage(msg);
updatePercent(metadata.percent | 0);
})
.then(function callback(blob) {
// see FileSaver.js
saveAs(blob, "test.zip");
showMessage("done !");
}, function(e) { showError(e);
});
return false;
});
});
}
function updateprocess(val){
$("#progress_bar").removeClass("hide")
.find(".progress-bar")
.attr("aria-valuenow", val)
.css({
width : val + "%"
});
$("#progress33").attr("value",val)
var progressBar = document.querySelector("#progress33");
progressBar.max=100;
progressBar.value=val.toFixed(2);
}
HTML
<div class="progress hide" id="progress_bar">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
</div>
</div>
<p class="hide" id="result"></p>
</div>
<progress id="progress33" value="0" class="progress-bar">
</progress>