JSZip如何压缩大文件

时间:2019-02-20 08:29:18

标签: javascript node.js compression electron jszip

我正在使用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>

0 个答案:

没有答案