极客时间返利平台,你可以在上边通过山月的链接购买课程,并添加我的微信 (shanyue94) 领取返现。
每天晚上九点 B站讲解前端工程化直播,并解答相关问题。

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

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 352 (opens new window)

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> 标签并设置 urldownload 属性来下载
  2. 可以通过把 json 转化为 dataurl 来构造 URL
  3. 可以通过把 json 转换为 Blob 再转化为 ObjectURL 来构造 URL

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

这里 为啥要 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 );

Last Updated: 11/27/2021, 10:11:48 AM