Как скачать объеденить несколько файлов в один архив и отправить на загрузку пользователю?

Question

[Дмитрий Дев]

Добрый день.

Я пытаюсь создать архив из файлов получая их из id инпутов и инициировать загрузку у пользователя этого архива.

let zip = new JSZip();
	$('#jsZip .btn').on('click', function (e) {
		$inputs = $($(this).data('target')).find('input:checkbox:checked');
		$inputs.each(function () {
			let fileID = $(this).attr('id').replace('download-docs-', '');

			var promise = $.get(filesObj.params[fileID]["SRC"]);

			zip.file(filesObj.params[fileID]["NAME"], promise);

		});
		
		zip.generateAsync({ type: "blob" }).then(function (blob) {
			saveAs(blob, "hello.zip");  
			}, function (err) {
			$(this).text(err);
		});
	});

Сейчас добился, что файлы скачиваются одним архивом, и если открыть их через блокнот, то содержание файлов правильное. И никак не пойму в чем проблема.

Answer 1

[zkrvndm]

Посмотрел твое демо, делай так:

$('button:contains("Скачать выбранные")').on('click', function() {
	
	var zip = new JSZip();
	
	var selector = $(this).data('target');
	
	var inputs = $(selector).find('input:checkbox:checked');
	
	if (inputs.length > 0) {
		
		var deferreds = inputs.map(function(n, element) {
			
			return $.Deferred(function(deferred) {
				
				var fileID = $(element).attr('id').replace('download-docs-', '');
				
				$.ajax({
					url: filesObj.params[fileID]['SRC'],
					type: 'GET',
					xhrFields: { responseType: 'blob' },
					dataType: 'binary',
					success: function(blob) {
						blob.name = filesObj.params[fileID]['NAME'];
						zip.file(filesObj.params[fileID]['NAME'], blob);
						deferred.resolve(blob);
					},
					error: function(jqxhr, status) {
						deferred.reject(jqxhr);
					}
				});
				
			});
			
		});
		
		$.when.apply(this, deferreds).done(function(blobs) {
			
			zip.generateAsync({ type: 'blob' }).then(function(blob) {
				saveAs(blob, 'files.zip');  
			}, function(err) {
				console.log('Не удалось создать архив:', err);
			});
			
		}).fail(function(jqxhr) {
			
			console.log('При скачивании файлов произошла ошибка, один из файлов не скачался:', jqxhr);
			
		});
		
	}

});

Comments

[Дмитрий Дев]

Надим Закиров Круто! Спасибо. Надо будет на досуге изучить его, чтобы посмотреть, где что записывается, чтобы понять всё. Как говорил Вадим видимо мне надо постичь асинхронный код и его (если правильно сейчас понимаю) promise.