UINOTE

实现方法：

• 通过将 JSON 转换为 Blob 文件
• 再用 Object URL 来构造对象 URL

首先，我们需要创建一个 a 标签来模拟点击下载文件：

/**
 * 下载字符串到文件
 * @param {string} content 文件内容
 * @param {string} filename 文件名
 */
const downloadFun = function (content, filename) {
    // 创建隐藏的可下载链接 A 标签
    const dom = document.createElement('a')
    dom.download = filename || '未命名文件'
    // 隐藏
    dom.style.display = 'none'
    // 将字符内容转换为成 blob 二进制
    const blob = new Blob([content])
    // 创建对象 URL
    dom.href = URL.createObjectURL(blob)
    // 添加 A 标签到 DOM
    document.body.appendChild(dom)
    // 模拟触发点击
    dom.click()
    // 或
    // dom.dispatchEvent(new MouseEvent('click'))
    // 移除 A 标签
    document.body.removeChild(dom)
}

将 JSON 转换为字符串

// 测试数据
const result = {
    title: '测试下载 JSON 文件',
    page: 'http://uinote.com',
    desc: '测试下载 JSON 文件',
    a: 'aaaaa',
    b: 'bbbbbb'
}

// 转换为字符串
// const content = JSON.stringify(result, null, 4) // 格式化代码，用4个空格分割
const content = JSON.stringify(result) // 字符串压缩为一行

创建 Blob 文件

const data = new Blob([content], { type: 'application/json,charset=utf-8;' })

下载

downloadFun(data, 'config.json')