内容丰富的本地文件下载

Question

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

在谷歌搜索时，我找到了带有数据 url 的解决方案 - 准备带有数据的 url。但是，在我的情况下，每次呈现页面（链接）时要生成 >1MB 的数据。是否有任何替代解决方案可以让我从 JavaScript 生成文件下载，但不需要我预先准备内容 - 仅当用户实际点击链接时？

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

Answer 1

试试 blob。

（不，不是那种）

demo

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

需要将 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);

需要为文件命名吗？

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

文件名和 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();