千家信息网

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

发表于:2025-01-23 作者:千家信息网编辑
千家信息网最后更新 2025年01月23日,本篇内容主要讲解"如何把 json 数据转化为 demo.json 并下载文件",感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习"如何把 json 数据转化为
千家信息网最后更新 2025年01月23日如何把 json 数据转化为 demo.json 并下载文件

本篇内容主要讲解"如何把 json 数据转化为 demo.json 并下载文件",感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习"如何把 json 数据转化为 demo.json 并下载文件"吧!


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

到此,相信大家对"如何把 json 数据转化为 demo.json 并下载文件"有了更深的了解,不妨来实际操作一番吧!这里是网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

0