本地文件下载有很多内容

Question

我正在使用本地浏览器内数据库来存储数据.但是,我想让用户能够将该数据导出为CSV.

谷歌搜索时我发现了数据网址的解决方案 - 用数据准备网址.但是在我的情况下,每次呈现页面(链接)时都会生成> 1MB的数据.是否有任何替代解决方案可以让我从JavaScript生成文件下载,但不要求我提前准备内容 - 只有当用户实际点击链接时？

如果它很重要我正在使用React来构建我的应用程序..

Answer 1

尝试一下blob.

(不,不是那种)

演示

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

需要将JSON转换为CSV？

演示

(/sf/answers/1047629201/)

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