Создание загружаемой ссылки из строки, которая должна быть сжата из-за длины строки - PullRequest
Новая
       5

Создание загружаемой ссылки из строки, которая должна быть сжата из-за длины строки

0 голосов
/ 26 сентября 2018

У меня есть строка (~ 2 МБ), которая представляет CSV, который мне нужно сделать доступным для загрузки на странице.Это то, что я делал, чтобы сделать строку загружаемой, и она отлично работала для небольших файлов. 

const csvContentEncoded = encodeURIComponent("data:text/csv;charset=utf-8," + csvContent);

const element = document.createElement("a");
element.setAttribute("href", csvContentEncoded);
element.setAttribute("download", "filename.csv");
element.style.display = "none";
document.body.appendChild(element);
element.click();
document.body.removeChild(element);

Но для файлов размером около 2 МБ это больше не работает в Chrome и приводит к загрузке файлов под названием «скачать».: Failed - Ошибка сети ", которую нельзя повторить.Как ни странно, эти загрузки прекрасно работают на Firefox и Chrome.После некоторого расследования это, кажется, определенно связано с размером файла, а не из-за других вещей (таких как синхронизация сетевых запросов).Тем не менее, я не смог найти ничего убедительного в отношении хрома и максимального размера для элементов с атрибутом HTML «download».

Я сейчас пытаюсь сжать содержимое перед установкой на элемент.Вот мой код: 

const zip = zlib.deflateSync("data:text/csv;charset=utf-8," + csvContent).toString("base64");
const csvContent = encodeURIComponent(zip);
const element = document.createElement("a");
element.setAttribute("href", csvContent);
element.setAttribute("download", "filename.csv"); // should I be changing this to a .zip or something?

element.style.display = "none";
document.body.appendChild(element);
element.click();
document.body.removeChild(element);

Но это не работает.Chrome отображает загружаемый файл как «Ошибка - проблема с сервером».Это также не работает на Firefox сафари.

1 Ответ

0 голосов
/ 26 сентября 2018

Попробуйте использовать блоб.Используя BLOB-объекты, вы можете загружать файлы размером от нескольких МБ до ГБ в зависимости от того, какой браузер вы используете. 

const csvData = new Blob([csvContent], { type: 'text/csv' }); 
const csvUrl = URL.createObjectURL(csvData);
const element = document.createElement("a");
element.setAttribute("href",csvUrl);
element.setAttribute("download", "filename.csv");
element.style.display = "none";
document.body.appendChild(element);
element.click();
document.body.removeChild(element);

Существуют также библиотеки, которые помогут вам добиться этого, такие как StreamSaver, FileSaver и т. Д.

...