Tải xuống tệp cục bộ với nhiều nội dung

Question

Tôi đang sử dụng cơ sở dữ liệu trong trình duyệt cục bộ để lưu trữ dữ liệu. Tuy nhiên, tôi muốn cung cấp cho người dùng khả năng xuất dữ liệu đó sang CSV.

Trong khi googling tôi tìm thấy giải pháp với url dữ liệu - chuẩn bị url với dữ liệu. Tuy nhiên trong trường hợp của tôi, đây là> 1MB dữ liệu để tạo ra mỗi lần trang (liên kết) được hiển thị. Có giải pháp thay thế nào cho phép tôi tạo tệp tải xuống từ JavaScript, nhưng không yêu cầu tôi chuẩn bị nội dung trả trước - chỉ khi người dùng thực sự nhấp vào liên kết?

Trong trường hợp tôi đang sử dụng React để xây dựng ứng dụng của mình ..

Answer 1

Thử một đốm màu.

(không, không phải là loại)

demo

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

Cần để chuyển đổi JSON để CSV?

demo

(https://stackoverflow.com/a/14966131/6560716)

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); 

Cần phải có một tên cho tập tin?

demo

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(); 

Tên tệp và JSON?

demo

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();