javascript - 内容丰富的本地文件下载

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