Возможно ли в javascript отправить несколько URL-адресов загрузки в один zip-файл, и этот zip-файл можно загрузить. Итак, на моей веб-странице есть одна кнопка, которая при нажатии загружает zip-файл со всеми файлами из URL-адресов загрузки, сжатых в zip?
Я считаю, что мне нужно использовать jszip или какой-то подобный инструмент. Возможно ли это вообще и есть ли какой-нибудь совет, с чего начать?
Вы можете использовать JSZip.js, XMLHttpRequest(), Array.prototype.map(), Promise.all() для создания .zip файла, когда все запросы файлов будут выполнены; используйте элемент <a> с атрибутом download, установленным на objectURL файла .zip в функции JSZip .generateAsync(), щелкните элемент a, чтобы отобразить диалоговое окно Save File с созданным .zip в качестве загружаемого файла.
<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>
plnkr http://plnkr.co/edit/baPtkILg927DtJfh4b5Y?p=preview
Access-Control-Allow-Origin 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.
- person guest271314; 12.05.2016
.mp3 фактическое местоположение? Окно загрузки выглядит как <iframe>, при нажатии на которое открывается реклама? Я пытаюсь поместить загруженный из Интернета файл в ZIP-архив Да, какой URL-адрес фактического ресурса, .mp3 файла, который вы хотите загрузить?
- person guest271314; 12.05.2016
XMLHttpRequest()? Какая прямая ссылка на ресурс? я использую API для получения mp3-файлов с YouTube Ссылка на документацию по API? Или доступен только подход, нажав ссылку для скачивания на странице?
- person guest271314; 12.05.2016
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.
- person guest271314; 12.05.2016
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.
- person guest271314; 12.05.2016
Недавно мне пришлось решать ту же проблему, и я нашел решение, используя JSZipUtils.
Решение можно найти здесь http://plnkr.co/edit/vWARo0dXbkgzmjyoRNi0?p=preview
У меня есть два файла, которые я хотел бы заархивировать и загрузить через браузер пользователей, и я вызываю функцию getBinaryContent(path, callback) для обоих файлов. Путь здесь - это место, где хранится файл.
Эти два файла представляют собой файл .wav и файл .json. Каждый из них должен обрабатываться по-разному, поэтому вы должны использовать {base64:true,binary:true} для файла .wav и {binary:true} для файла json в качестве аргумента для файла функции JSZip.
Код также можно найти здесь
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);
})
