vue把后端返回的数据导出为json文件并转为json格式

Question

这是导出的json文件打开以后是这样的

如何把导出的json文件打开就是下图这样的格式，而不是上面那样的一大堆

这是 我进行导出的操作的代码

Answer 1

改为

let str = JSON.stringify(arr, null, 2)

详见JavaScript 中 JSON 的 5 个小技巧

---

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 2

你试试这个吧

function saveJSON(jsonData, asFilename) {
  const filename = asFilename || `${(new Date()).toISOString()}.json`;
  const data = typeof jsonData === 'object' ? JSON.stringify(jsonData, undefined, 2) : jsonData;
  const blob = new Blob([data], { type: 'text/json' });
  const link = document.createElement('a');
  link.setAttribute('style', 'display: none');
  link.download = filename;
  link.href = window.URL.createObjectURL(blob);
  link.dataset.downloadurl = ['text/json', link.download, link.href].join(':');
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 3

JSON.stringify自带美化功能

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 4

JSON.stringify(value, replacer, space)可以传入三个参数，第一个参数是将要序列化成 一个 JSON 字符串的值，第二个参数和第三个参数是可选的，具体可以查看MDN中JSON.stringify()的用法。
value
将要序列化成 一个 JSON 字符串的值。
replacer 可选
如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。
space 可选
指定缩进用的空白字符串，用于美化输出（pretty-print）；如果参数是个数字，它代表有多少的空格；上限为 10。该值若小于 1，则意味着没有空格；如果该参数为字符串（当字符串长度超过 10 个字母，取其前 10 个字母），该字符串将被作为空格；如果该参数没有提供（或者为 null），将没有空格。

对于你的问题，可以修改let str = JSON.stringify(arr)为let str = JSON.stringify(arr, null, 4)。其余的不变，望采纳！；