2014-10-29 141 views
1

我正在使用JSzip下載div的html。 div裏面有圖片(它們不是base64編碼的)。有沒有一種方法可以使用JSzip從他們的圖像路徑url下載文件?或者他們必須進行base64編碼?使用JSzip從URL保存圖像

我當前的代碼是剛剛從JSzip網站(http://stuk.github.io/jszip/)所有你需要下載所有的圖像與阿賈克斯的

var zip = new JSZip(); 
    var email = $('.Result').html(); 
    zip.file("test.html", email); 
    var content = zip.generate({type:"blob"}); 
    // see FileSaver.js 
    saveAs(content, "example.zip"); 

回答

1

首先,基本的演示代碼。如果他們在同一個域名中,你很幸運,否則你需要CORS或代理。

var xhr = new XMLHttpRequest(); 

xhr.addEventListener('load', function(){ 
    if (xhr.status == 200){ 
     //Do something with xhr.response (not responseText), which should be a Blob 
    } 
}); 

xhr.open('GET', 'http://target.url'); 
xhr.responseType = 'blob'; 
xhr.send(null); 

當你有像你必須處理所有<img>的的src要麼你使用Base64替換它們或轉介他們到一個文件夾中,你已經把他們的文件夾中有JSZip

var reader = new FileReader(); 
reader.onload = function() { 
    showout.value = this.result; 
}; 
reader.readAsDataURL(xhr.response); 
0

你可能想嘗試使用JSzip-utils它有一個調用只是爲了從網址下載圖片也看看JSzip文件中的例子,我發現它是非常好的。你可以找到工作example with code here.

這只是下載的一部分,我也用它來使用他們的圖像源URL從社交媒體下載圖像。

function urlToPromise(url) { 
return new Promise(function(resolve, reject) { 
    JSZipUtils.getBinaryContent(url, function (err, data) { 
     if(err) { 
      reject(err); 
     } else { 
      resolve(data); 
     } 
    }); 
}); 
} 
var zip = new JSZip(); 
zip.file(filename, urlToPromise(url), {binary:true}); 
zip.generateAsync({type:"blob"}) 
.then(function callback(blob) { 

    // see FileSaver.js 
    saveAs(blob, "example.zip"); 
});