React下载JS/JSON等文件内容显示[object Object]问题求助

你当前的代码根本没去请求目标URL的文件内容，而是把{url}这个对象直接塞进了Blob里——当JavaScript把对象转成字符串时，默认就会输出[object Object]，这就是问题根源。

正确的做法是先通过网络请求获取目标URL的文件内容，再用真实的文件数据生成Blob：

修复后的处理函数 #

async function handleDownloadFile(url, name) {
  try {
    // 发起请求获取文件的Blob数据
    const response = await fetch(url);
    if (!response.ok) throw new Error('文件请求失败');
    
    const fileBlob = await response.blob();
    const formatedURL = window.URL.createObjectURL(fileBlob);
    
    const link = document.createElement('a');
    link.href = formatedURL;
    link.setAttribute('download', name);
    document.body.appendChild(link);
    link.click();
    
    // 下载完成后释放URL对象，避免内存泄漏
    window.URL.revokeObjectURL(formatedURL);
    document.body.removeChild(link);
  } catch (err) {
    console.error('下载出错:', err);
    // 这里可以加用户提示，比如alert('文件下载失败')
  }
}

调用部分无需改动 #

<div className="messageFile" onClick={() => handleDownloadFile("http://localhost:5000/storage/example.json", "example.json")}>
    Download File
</div>

关键改动说明 #

• 改成异步函数，用fetch请求目标文件的真实内容
• 直接使用响应返回的blob()作为文件数据，而不是手动构造包含URL的对象
• 增加错误处理和资源释放步骤，让代码更健壮

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