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

How to convert Base64 File to the actual file / original file in javascript and download it to client

本文关键字：文件 原始 下载 客户端 转换 Base64 javascript      更新时间：2023-09-26
如果我

的问题有点令人困惑，我很抱歉，但我认为可以通过我的详细解释来澄清这一点。

我对保存/上传文件非常陌生。我最近能够上传图像并将其保存为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。我试图谷歌，但大多数时候我看到how to convert Base64 to image...正如我之前所说，我已经在 <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
}

请帮忙....

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

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");
}
相关文章：