Django视图返回JsonResponse时如何实现JSON内容下载为.json文件

方案1：后端直接触发下载（无需额外点击，推荐） #

直接修改Django视图的返回逻辑，给响应添加下载头，用户提交表单后浏览器会自动触发JSON文件下载，不需要额外使用DOWNLOAD按钮：

import json
from django.http import HttpResponse

# 你原来构造nested_data的逻辑保持不变
nested_data = {
    'name': cleaned_data3['theme_name'],
    'visualStyles': {
        'barChart': {
            '*': {
                'general': [{
                    'responsive': cleaned_data2['responsive'],
                    'keepLayerOrder': cleaned_data2['maintain_layer_order']
                }],
                'legend': [{
                    'show': cleaned_data['show'],
                    'position': cleaned_data['position'],
                    'showTitle': cleaned_data['show_title'],
                    'labelColor': {
                        'solid': {
                            'color': '#666666'
                        }
                    },
                    'fontFamily': cleaned_data['font'],
                    'fontSize': cleaned_data['font_size']
                }],
            }
        }
    }
}

# 构造带下载头的响应
response = HttpResponse(
    json.dumps(nested_data, ensure_ascii=False, indent=2),
    content_type='application/json'
)
# 配置下载的文件名
response['Content-Disposition'] = 'attachment; filename="theme_config.json"'
return response

方案2：保留「提交后手动点击DOWNLOAD下载」的交互 #

如果你需要用户提交后先预览结果，再手动点击按钮下载，确实需要给a标签的href属性赋值，具体实现如下：

后端逻辑 #

保持你现有的JsonResponse(nested_data)返回逻辑不变即可。

前端逻辑 #

将表单改为异步提交，拿到返回的JSON数据后生成临时Blob链接，赋值给a标签的href属性：

// 记得给你的表单加个id比如id="configForm"
document.querySelector('#configForm').addEventListener('submit', async function(e) {
    // 阻止默认表单提交跳转
    e.preventDefault();
    const formData = new FormData(this);
    // 发送异步POST请求，注意补充CSRF Token
    const res = await fetch('/你的接口地址/', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRFToken': document.querySelector('[name="csrfmiddlewaretoken"]').value
        }
    });
    const jsonData = await res.json();
    // 生成Blob临时链接
    const blob = new Blob([JSON.stringify(jsonData, null, 2)], {type: 'application/json'});
    const tempUrl = URL.createObjectURL(blob);
    // 赋值给a标签
    const downloadBtn = document.querySelector('a[download]');
    downloadBtn.href = tempUrl;
    // 可自定义文件名，比如用返回的name字段当文件名
    downloadBtn.download = `${jsonData.name || 'config'}.json`;
})

注：如果不需要用户手动点击，也可以在拿到tempUrl后直接调用downloadBtn.click()自动触发下载。 #

内容的提问来源于stack exchange，提问作者mrl