Is it possible, in javascript, to have multiple download urls sent into one zip file and that zip file can be downloaded. So pretty much, on my web page, there is one button, that when clicked downloads a zip file of all the files from the download urls compressed into the zip?
I believe I'd need to use jszip or some tool like that. Is this at all possible and is there any advice on where to start?
You can use JSZip.js, XMLHttpRequest(), Array.prototype.map() , Promise.all() to create .zip file when all requests for files have completed; use <a> element with download attribute set to objectURL of .zip file at JSZip .generateAsync() function, click on a element should display Save File dialog with created .zip as downloadable file.
<head>
<script src="jszip.js"></script>
<script>
window.onload = function() {
var zip = new JSZip();
var a = document.querySelector("a");
var urls = ["a.html", "b.html"];
function request(url) {
return new Promise(function(resolve) {
var httpRequest = new XMLHttpRequest();
httpRequest.open("GET", url);
httpRequest.onload = function() {
zip.file(url, this.responseText);
resolve()
}
httpRequest.send()
})
}
Promise.all(urls.map(function(url) {
return request(url)
}))
.then(function() {
console.log(zip);
zip.generateAsync({
type: "blob"
})
.then(function(content) {
a.download = "folder" + new Date().getTime();
a.href = URL.createObjectURL(content);
a.innerHTML = "download " + a.download;
});
})
}
</script>
</head>
<body>
<a href="" download>download</a>
</body>
Access-Control-Allow-Origin header set "XMLHttpRequest cannot load https://www.youtubeinmp3.com/download/?video=https://www.youtube.com/watch?v=i62Zjga8JOM. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://stackoverflow.com' is therefore not allowed access." –
Kropotkin .mp3 actual location is? The "Download" window appears to be an <iframe> that when clicked opens an ad? "I'm trying to put a downloaded file from the internet into a zip folder" Yes, what is the URL of the actual resource, .mp3 file, that you want to download? –
Kropotkin XMLHttpRequest()? What is the direct link to resource? " i'm using an api to get the mp3 files from youtube" Link to API documentation? Or is only approach available clicking download link at page? –
Kropotkin XMLHttpRequest cannot load http://www.youtubeinmp3.com/download/get/?i=Hes1wwZTx03diwb8wuslSc9mm49DGyGQYnbaQZoJuNdlQ6Ago%2BN4LvUUQA5qBs43gzh1APL5HkzCAquh%2Fzceaw%3D%3D. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://stackoverflow.com' is therefore not allowed access. –
Kropotkin 
XMLHttpRequest cannot load https://pixabay.com/static/uploads/photo/2016/05/05/02/15/gecko-1373144_640.jpg?attachment%22. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://stackoverflow.com' is therefore not allowed access. –
Kropotkin I recently had to solve the same issue and had found a solution using JSZipUtils.
The solution can be found here http://plnkr.co/edit/vWARo0dXbkgzmjyoRNi0?p=preview
I have two files that I would like to zip and download via the users browser and I call the function getBinaryContent(path, callback) on both files. The path here is the where the file is stored.
The two files are a .wav file and a .json file. Each of them should be treated differenly and hence you should use {base64:true,binary:true} for the .wav file and {binary:true} for the json file as an argument for the function file of JSZip.
The code can be found here as well
var file_confirmation=[false,false];
var file_name=["test1.wav","test.json"];
var urlList =["test.wav","test.json"];
var filenameSave ="myZip";
function zipFiles(id,urls)
{
zip = new JSZip();
JSZipUtils.getBinaryContent(urls[0],function (err, data)
{
if(!err)
{
var dic={base64:true,binary:true}; //WAV File Encoding
zip.file(file_name[0], data, dic);
file_confirmation[0]=true;
downloadZipIfAllReady(id);
}
});
JSZipUtils.getBinaryContent(urls[1],function (err, data)
{
if(!err)
{
var dic={binary:true}; //JSON File Encoding
zip.file(file_name[1], data, dic);
file_confirmation[1]=true;
downloadZipIfAllReady(id);
}
});
}
function downloadZipIfAllReady(id)
{
if(file_confirmation.every(function(element, index, array) {return element;}))
{
zip.generateAsync({type:"blob"})
.then(function(content)
{
var a = document.querySelector("#"+id);
a.download = filenameSave;
a.href = URL.createObjectURL(content);
a.click();
});
}
}
$(document).ready(function()
{
zipFiles("a_id",urlList);
})
© 2022 - 2024 — McMap. All rights reserved.
