将 JSON 数组下载到文件

cod*_*leb 3 download angular-routing angular

对于以下情况,推荐的方法是什么:

应通过按钮下载实体数组。该按钮被调用Download transactions并且应该准确地执行该操作,而不会强迫用户“右键单击并‘将网站另存为...’”。

我有一个实体Transaction和一个包含它的数组。

实体:

export class Transaction {
  title: string;
  category: string;
  period: string;
  value: string;
}
Run Code Online (Sandbox Code Playgroud)

这是我最后一次尝试将此数组下载为文件:

  exportJson(): void {
    console.log(this.transactions)
    const c = JSON.stringify(this.transactions);
    const file = new Blob([c], {type: 'text/json'});
    const fileURL = URL.createObjectURL(file);
    location.href = fileURL;
  }
Run Code Online (Sandbox Code Playgroud)

这将在当前窗口中加载包含结果的选项卡,但作为纯文本而不是可下载文件。

我知道关于这个主题有很多问题,但我发现没有一个对我有用。任何帮助表示赞赏!:)

Yuv*_*man 5

以下功能可能就是您正在寻找的功能:

function download(blob, filename) {
    if (window.navigator.msSaveOrOpenBlob) // IE10+
        window.navigator.msSaveOrOpenBlob(blob, filename);
    else { // Others
        var a = document.createElement("a"),
                url = URL.createObjectURL(blob);
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        setTimeout(function() {
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);  
        }, 0); 
    }
}
Run Code Online (Sandbox Code Playgroud)

进而

exportJson(): void {
    console.log(this.transactions)
    const c = JSON.stringify(this.transactions);
    const file = new Blob([c], {type: 'text/json'});
    download(file,"fileName.json");
  }
Run Code Online (Sandbox Code Playgroud)