Локальная загрузка файла с большим количеством контента

Я использую локальную базу данных в браузере для хранения данных. Однако я хочу предоставить пользователям возможность экспортировать эти данные в CSV.

Во время поиска Google я нашел решение с URL-адресами данных - подготовьте URL-адрес с данными. Однако в моем случае это > 1 МБ данных для генерации каждый раз, когда отображается страница (ссылка). Есть ли альтернативное решение, которое позволило бы мне сгенерировать загрузку файла с JavaScript, но не требует, чтобы я подготовил контент заранее - только когда пользователь действительно нажимает на ссылку?

В случае, если это важно, я использую React для создания моего приложения.

Ответы

Ответ 1

Попробуйте blob.

dXTQL.png

(нет, не такой)

демо

var blob = new Blob(["CSV DATA HERE"], {type: "text/csv"});
var url  = URL.createObjectURL(blob);
open(url);

Вам нужно преобразовать JSON в CSV?

демонстрация

(fooobar.com/info/24377/...)

var data = [["name1", "city1", "some other info"], ["name2", "city2", "more info"]];
var csvContent = "";
data.forEach(function(infoArray, index){
   dataString = infoArray.join(",");
   csvContent += index < data.length ? dataString+ "\n" : dataString;
}); 
var blob = new Blob([csvContent], {type: "text/csv"});
var url  = URL.createObjectURL(blob);
open(url);

Нужно иметь имя для файла?

демо

var blob = new Blob(["CSV DATA HERE"], {type: "text/csv"});
var url  = URL.createObjectURL(blob);
var link = document.createElement("a");
link.setAttribute("href", url);
link.setAttribute("download", "filename.csv");
document.body.appendChild(link);
link.click();

Имя файла и JSON?

демо

var data = [["name1", "city1", "some other info"], ["name2", "city2", "more info"]];
var csvContent = "";
data.forEach(function(infoArray, index){
   dataString = infoArray.join(",");
   csvContent += index < data.length ? dataString+ "\n" : dataString;
}); 
var blob = new Blob([csvContent], {type: "text/csv"});
var url  = URL.createObjectURL(blob);
var link = document.createElement("a");
link.setAttribute("href", url);
link.setAttribute("download", "filename.csv");
document.body.appendChild(link);
link.click();