為什么FileSaversaveAs不適用于JSZip？

第一次發布，這是整個代碼（其中大部分是我在網上找到的并調整了一些東西以滿足我的目的），但更具體地說，我的錯誤是在我得到的最后。

未捕獲的型別錯誤：無法在“URL”上執行“createObjectURL”：多載決議失敗。

當我簡單地使用 saveAs(img_url, "img.png") 時，會彈出保存到筆記本電腦的選項。但是我在嘗試使用“內容”時遇到了上面提到的錯誤。我在腳本中有檔案保護程式和 jszip，我似乎找不到任何方法來修復錯誤，然后停止執行任何其他操作。抱歉代碼混亂，非常感謝幫助。

主要部分在底部，其余部分在那里以防有人可能想看到。有 blob 的 url，然后是畫布生成器，我只是不知道為什么它不會保存。

!function() {
    function dataURLtoBlob(dataURL, type) {
      var binary = atob(dataURL.split(',')[1]),
          length = binary.length,
          binaryArray = new Uint8Array(length);
      for (var i = 0; i < length; i  ) {
        binaryArray[i] = binary.charCodeAt(i);
      }
      return new Blob([binaryArray], {type: type});
    }

    var SolidImage = function() {
      var canvas = document.createElement('canvas'),
          ctx = canvas.getContext('2d');
      this.img = new Image();
      this.make = function(color) {
        canvas.width = 500;
        canvas.height = 500;
        
        ctx.fillStyle = color;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "#FFFFFF";
        ctx.textAlign = "center";
        ctx.font = "bold 50px Courier New";
        ctx.fillText(color.substring(3), 250, 250);
        var dataURL = canvas.toDataURL('image/png')
        this.img.src = dataURL;
        if (this.blobURL) URL.revokeObjectURL(this.blobURL);
        this.blob = dataURLtoBlob(dataURL, 'image/png');
        this.blobURL = URL.createObjectURL(this.blob);
      }
    };
    
    var solidImage = new SolidImage(),
        button = document.getElementById('make'),
        result = document.getElementById('result'),
        link = document.createElement('a');
    
    link.setAttribute('target', '_blank');
    result.appendChild(solidImage.img);
    result.insertAdjacentHTML('beforeend', 'Save this image or<br>');
    result.appendChild(link);
    solidImage.img.width = 600;
  
    
    button.addEventListener('click', function(){
        var zip = new JSZip();
        console.log("after zip");
        //var img = zip.folder("rdm_imgs");
        //////////////////////////////////
        for (var i = 0; i < 1; i  ) {
            setTimeout(function() {
        var rgb_r = Math.floor(Math.random() * (256 1)),
            rgb_g = Math.floor(Math.random() * (256 1)),
            rgb_b = Math.floor(Math.random() * (256 1)),
            random_color = "rgb("   rgb_r   ", "   rgb_b   ", "   rgb_g   ")";
      var filename = random_color.replace(/\s/g, "")   '.png';
      solidImage.make(random_color);
      link.innerHTML = 'Download content '   filename;
      var img_url = solidImage.blob;
      //console.log(img_url.replace(/^data:image\/(png|jpg);base64,/, ""));
      console.log(img_url);
      //link.setAttribute('href', img_url);
      //link.setAttribute('download', filename);
      result.className = 'generated';

      zip.file(filename, img_url);
            },i * 500)}
        console.log("after loop");
        var content = zip.generateAsync({type:"blob"});
        console.log("after zip generate");
        saveAs(content, "imgs.zip");
        console.log("after saveAs");
        //link.innerHTML = 'Download Contents.zip';
        //var img_url = solidImage.blobURL;
        //link.setAttribute('href', content);
        //link.setAttribute('download', "content.zip");
    });
  }();

uj5u.com熱心網友回復：

zip.gzip.generateAsync()回傳一個Promise。這個 Promise 將在一段時間后用 Blob 解決，但它是一個 Promise，而不是 Blob。
所以你需要等待這個 Promise 的決議才能訪問生成的 Blob。

您可以將函式標記為async，然后使用await關鍵字：

button.addEventListener('click', async function(){
  // ...
  var content = await zip.generateAsync({type:"blob"});

或者將 saveAs 部分包裝在傳遞給 Promise 的回呼中.then()：

zip.generateAsync({type:"blob"}).then(function(content) {
  console.log("after zip generate");
  saveAs(content, "imgs.zip");
})

現在，無論您選擇什么，您的 zip 檔案實際上都是空的。您僅在 的回呼中向其添加內容，這setTimeout意味著只有在您創建 zip 檔案后才會添加此內容，這為時已晚。
所以把setTimeout(看起來沒用的部分去掉，直接執行其回呼的內容。

標籤：javascript 斑点 压缩包 文件保护程序

上一篇：如果找到匹配項，則增加陣列中的值

下一篇：如何獲得一個單詞在陣列中的次數？