JS: загрузить zip-файл из строки с помощью Javascript
Я хочу получить zip-файл в виде строки из запроса Ajax, а затем сохранить его в памяти, чтобы при необходимости его можно было загружать несколько раз, чтобы отправлялся только один запрос.
Я пробовал скачать вот так:
zip_string = 'PK etc.'
function download(filename, text) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
// Start file download.
download("zip1.zip", zip_string);
Он прошел через zip, но тогда, очевидно, возникла проблема, потому что он не открывался. Кто-нибудь может увидеть, что я делаю не так?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Тип данных вашей ссылки href - это простой текст (то есть, как указано в data:text/plain), что в основном означает, что содержимое ссылки будет обрабатываться браузером как простой текст.
Zip-архив - это двоичный формат - вам нужно будет немного больше поработать, чтобы сгенерировать настоящий zip-файл, а затем таким образом кэшировать его на стороне клиента. Вы можете посмотреть на zip.js как на библиотеку, которая поможет вам в этом.
Однако вы можете внести простые изменения, чтобы функция загрузки работала - просто замените "zip1.zip" на "zip1.txt". Я подготовил jsFiddle здесь, если вы, чтобы увидеть это в действии.
Надеюсь, это поможет!
Спасибо, но я хочу, чтобы можно было загрузить настоящий файл .zip, а не файл .txt.
Я решил проблему, закодировав строку zip-файла как base64 на сервере, прежде чем она будет отправлена.
with open(file, "rb") as f:
bytes = f.read()
encoded = base64.b64encode(bytes)
А затем в JS я просто указываю, что это base64:
zip_string = 'UEsDBBQAAAAIANQzCU0J56mLPAIAAD4VAAAOAAAA etc.'
function download(filename, data) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;base64,' + data);
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
// Start file download.
download("zip1.zip", zip_string);
Интересно, есть ли способ загрузить zip без кодирования base64. Указав правильный тип Blob?
Использование пакета JSZip: https://stuk.github.io/jszip/
public async downloadFile(filename: string, content: string) {
const zip = new JSZip();
await zip.loadAsync(content, {base64: true});
const blob = await zip.generateAsync({type:"blob"});
const element = document.createElement("a");
element.setAttribute("href", window.URL.createObjectURL(blob));
element.setAttribute("download", filename);
element.style.display = "none";
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
const fileName = "test.zip";
const content = "UEsDBAoAAAAAAI5ONE9i6ZVwCQAAAAkAAAAIAAAAdGVzdC50eHRUZXN0IGZpbGVQSwECPwAKAAAAAACOTjRPYumVcAkAAAAJAAAACAAkAAAAAAAAACAAAAAAAAAAdGVzdC50eHQKACAAAAAAAAEAGABz76T2f2/VAXPvpPZ/b9UB1NBncjhp1QFQSwUGAAAAAAEAAQBaAAAALwAAAAAA"; // base64 content without mimeType
this.downloadFile(fileName, content);
Это потрясающая библиотека!
Вы должны создать URL-адрес большого двоичного объекта вместо создания строки base64, используя URL.createObjectURL (blob)