如何在javascript中将Base64文件转换为实际文件/原始文件并下载到客户端

Question

很抱歉如果我的问题有点混乱，但我认为我可以通过详细的解释来澄清。

我非常新于保存/上传文件。 最近我已经能够上传图像并将其保存到数据库中作为base64（数据类型= mediumblob），并通过设置<img src='base64_data_from_db' />再次在浏览器中显示它。

现在是我真正的问题。

我必须上传任何类型的文件到数据库中。 保存后，用户必须能够通过单击链接/按钮（我使用了链接）在浏览器中下载文件。 我能够使用base64保存文件。

我现在有的问题是如何将base64字符串转换为实际/原始文件（如MS Word，文本文件，图像等）并将其下载到用户计算机上。

我删除了base64字符串的前缀，并使用window.atob(str)进行转换。 我可以看到当我console.log(window.atob(str))时，某种程度上可以看到文件的内容，但我不知道该如何下载它。

注意：我在保存时使用了base64，因为我使用JSON保存它。 我正在使用Java Spring Hibernate。 我尝试过谷歌搜索，但大多数时间我看到的是“如何将Base64转换为图像”之类的内容... 正如我之前所说，我已经在<img src=''/>中显示了图像。 我也在阅读有关javascript FileReader的文章，但它需要Blob作为参数，而我所拥有的是base64字符串。

由于我不知道该怎么做，下面是一个非常不完整的代码...

// strBase64 -- The base64 string equivalent of the file 
function convBase64ToFile(strBase64) {
    var tmp = strBase64.split(","); // To remove the prefix
    var converted = window.atob(tmp[1]); //
    console.log(converted); // Displays the content of the actual file
}

请帮忙……

- TheOnlyIdiot

---

这里有两个不同的问题：一个是base64转换；另一个是在客户端上保存文件。我建议你分别解决这两个问题。 - Jon Skeet

此外，你应该真的重新考虑你在这里的方法。数据库并不是为存储文件而优化的，这就是文件系统的作用。你应该真正努力想出如何将文件存储为文件，而不是如何将base64转换为可下载文件。 - Christian

@ChristianVarga 我必须将它保存到数据库中，因为这是要求。 - TheOnlyIdiot

@TheOnlyIdiot，谁指定了这个要求？显然不是一个有经验的人。那些不理解数据库和文件系统区别的人不应该做出这样的决定，你作为开发人员的工作就是实现最佳方案（并在相关情况下表达自己的担忧），而不是简单地按照别人的要求去做（特别是那些不知道自己在说什么的人）。 - Christian

Answer 1

我已经解决了这个问题... 将base64字符串转换为Blob，然后使用URL.createObjectURL()获取URL，接着打开一个新窗口，并将Blob的URL设置为该窗口的URL。

function convBase64ToFile(strBase64) {
    var tmp = strBase64.split(",");
    var prefix = tmp[0];
    var contentType = prefix.split(/[:;]+/)[1];
    var byteCharacters = atob(tmp[1]);

    var byteNumbers = new Array(byteCharacters.length);
    for (var i = 0; i < byteCharacters.length; i++) {
         byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    var byteArray = new Uint8Array(byteNumbers);
    var blob = new Blob([byteArray], {type: contentType});
    var blobUrl = URL.createObjectURL(blob);
    window.open(blobUrl, "popup","width=1000,height=500,scrollbars=1,resizable=no," +
    "toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0");
}

- TheOnlyIdiot