JavaScript：将Base64字符串保存为文件

Question

我有一个base64字符串，文件类型不确定，可能是图片、文本甚至pdf。我需要显示下载链接，当用户点击后应该能够像正常下载文件那样开始下载。
简而言之，服务器将文件以base64字符串的方式发送给我，我需要将其保存为浏览器上的文件。如何将base64字符串保存为浏览器上的文件？最好的解决方案也能在IE9上运行。

- Ikrom

Answer 1

根据https://gist.github.com/RichardBray/23decdec877c0e54e6ac2bfa4b0c512f进行修改以在Firefox上运行。

function downloadBase64File(contentBase64, fileName) {
    const linkSource = `data:application/pdf;base64,${contentBase64}`;
    const downloadLink = document.createElement('a');
    document.body.appendChild(downloadLink);

    downloadLink.href = linkSource;
    downloadLink.target = '_self';
    downloadLink.download = fileName;
    downloadLink.click(); 
}

- Nuno Ribeiro

---

这里有一个语法错误：缺少“function”关键字。 - Anderson Green

文件开始下载，然后出现“失败 - 网络错误”的提示。 - MadMac

@MadMac 我遇到了同样的错误。我输入了错误的网址。正确的格式应该是"data:[fileMimeType];base64,[base64Content]"。 - danielevigi

Answer 2

您可以使用download.js。

download(base64String, filename, mimeType)

- kerwal

---

话虽如此，这个回答对我帮助最大。+1 - aks.

这将为我打开一个“另存为”对话框。它不能自动保存图像吗？ - nclsvh

@nclsvh，这部分取决于您的浏览器。它可能配置为随时或不询问您。 - ConductedClever

Answer 3

您可以使用 JavaScript 下载 PDF。

操作步骤：

document.location = 'data:application/pdf;base64,' + base64String

- kerwal

---

我认为，在单页应用程序或完全的 AJAX 场景中，不打开另一个选项卡或不离开当前行为更加合适。 - ConductedClever

这导致出现“不允许导航顶层框架到数据URL：data:image/jpeg;base64，...”的错误。与原帖不同，我尝试将base64String转换为JPEG文件而不是PDF，这可能会导致此问题。 - Hiroki

Answer 4

当浏览器请求资源时，如果适当的响应头存在，则可以获得所需的效果（网页显示链接，用户单击后弹出“另存为”对话框）：

Content-Disposition: attachment; filename="yourfilename.extension"

如果您从服务器以base64字符串嵌入HTML中获取文件，则可以跳过嵌入并直接嵌入到您的服务器上的文件的直接链接，让服务器将其提供给用户。

{{link1：有关Content-Disposition的相关SO}}

- Kirk B.