如何把 json 数据转化为 demo.json 并下载文件

Issue 欢迎在 Gtihub Issue 中回答此问题: Issue 352

Author 回答者: shfshanyue

json 视为字符串，可以利用 DataURL 进行下载

Text -> DataURL

除了使用 DataURL，还可以转化为 Object URL 进行下载

Text -> Blob -> Object URL

可以把以下代码直接粘贴到控制台下载文件

function download(url, name) {
  const a = document.createElement("a");
  a.download = name;
  a.rel = "noopener";
  a.href = url;
  // 触发模拟点击
  a.dispatchEvent(new MouseEvent("click"));
  // 或者 a.click()
}
 
const json = {
  a: 3,
  b: 4,
  c: 5,
};
const str = JSON.stringify(json, null, 2);
 
// 方案一：Text -> DataURL
const dataUrl = `data:,${str}`;
download(dataUrl, "demo.json");
 
// 方案二：Text -> Blob -> ObjectURL
const url = URL.createObjectURL(new Blob(str.split("")));
download(url, "demo1.json");

总结

1. 模拟下载，可以通过新建一个 <a href="url" download><a> 标签并设置 url 及 download 属性来下载
2. 可以通过把 json 转化为 dataurl 来构造 URL
3. 可以通过把 json 转换为 Blob 再转化为 ObjectURL 来构造 URL

Author 回答者: fariellany

这里 为啥要split下呢 const url = URL.createObjectURL(new Blob(str.split(”))) 我看mdn 上面只需要 const url = URL.createObjectURL(new Blob([str], { type: ‘application/json’ })) 是有其他的含义吗 虽然都能实现下载的功能？

Author 回答者: amandaQYQ

这里 为啥要split下呢 const url = URL.createObjectURL(new Blob(str.split(”))) 我看mdn 上面只需要 const url = URL.createObjectURL(new Blob([str], { type: ‘application/json’ })) 是有其他的含义吗 虽然都能实现下载的功能？

因为需要Blob的API是var aBlob = new Blob( array, options );

Author 回答者: xinconan

方法一有2个缺点：
1、无法保留缩进
2、字符串里面的空格会被删除

Author 回答者: JieChongHai

@xinconan 我并没有复现你说的方法一的缺点，能贴一段代码或是更详细的说明吗

Author 回答者: xinconan

@xinconan 我并没有复现你说的方法一的缺点，能贴一段代码或是更详细的说明吗

试了下方法一是可以的，说的那两个缺点是因为之前遇到过，但和我之前写法上有些不同。其实这里并不需要加 application/json;charset=utf-8

const dataUrl = `data:application/json;charset=utf-8,${str}`; // 这种写法有问题