JS基础：Base64转文件|极客笔记

JS基础：Base64转文件

在Web开发中，我们经常会遇到需要将文件以Base64的形式转换成字符串，或者将Base64字符串转换成文件的需求。本文将详细介绍如何使用JavaScript来实现这一过程。

什么是Base64

Base64是一种常见的用于将二进制数据编码为文本的方法。它主要用于在HTTP协议等场景下传输数据，由于文本数据相比二进制数据更容易传输和处理，Base64编码可以把二进制数据转换为文本数据，从而实现数据传输的目的。

Base64编码的规则很简单，它是将二进制数据每3个字节划分为一组，每组有24个比特，然后再把这24个比特划分为4组，每组6个比特，最后再将这4组6比特的数据转换为4个字符。这样就把原始的二进制数据转换为了文本数据。

Base64转换为文件

在JavaScript中，要实现将Base64字符串转换成文件，我们可以采用如下的步骤：

步骤1：将Base64字符串转换为Blob对象

首先，我们需要将Base64字符串转换为Blob对象。Blob对象表示一个不可变的、原始数据的类似文件对象。我们可以使用atob()方法将Base64字符串转换为二进制数据，然后通过构造函数Blob来创建Blob对象。

function base64toBlob(base64) {
    var byteCharacters = atob(base64);
    var byteArrays = [];
    for (var offset = 0; offset < byteCharacters.length; offset += 512) {
        var slice = byteCharacters.slice(offset, offset + 512);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }

    return new Blob(byteArrays, { type: 'application/pdf' });
}

步骤2：创建URL对象并下载文件

接下来，我们可以通过URL.createObjectURL()方法创建一个URL对象，然后将Blob对象作为参数传入。最后，通过创建一个<a>标签，将URL对象赋值给href属性，设置download属性为文件名，再触发click事件，即可实现文件的下载。

function downloadFile(blob, filename) {
    var url = URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}

示例代码

接下来，我们通过一个示例代码来演示如何将Base64字符串转换为文件并下载。

var base64String = 'JVBERi0xLjMKJcTl8uXi1xCI5...' // 这里是你的Base64字符串
var blob = base64toBlob(base64String);
downloadFile(blob, 'example.pdf');

运行上述示例代码后，即可实现将Base64字符串转换为PDF文件并下载。

文件转换为Base64

与将Base64字符串转换为文件相反，如果我们需要将文件转换为Base64字符串，我们可以采用以下步骤：

步骤1：将文件转换为Blob对象

首先，我们需要将文件转换为Blob对象。这一步骤与上面的步骤1类似，只不过这次我们是直接将文件作为参数传入。

function filetoBlob(file) {
    return new Blob([file]);
}

步骤2：将Blob对象转换为Base64字符串

接下来，我们可以使用FileReader对象将Blob对象转换为Base64字符串。

function blobtoBase64(blob, callback) {
    var reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onload = function() {
        callback(reader.result.split(',')[1]);
    };
}

示例代码

下面我们通过一个示例代码来演示如何将文件转换为Base64字符串。

var input = document.getElementById('fileInput'); // 通过input标签获取文件
input.addEventListener('change', function() {
    var file = input.files[0];
    var blob = filetoBlob(file);
    blobtoBase64(blob, function(base64String) {
        console.log(base64String);
    });
});

在上面的示例代码中，我们通过一个input标签获取用户选择的文件，并将其转换为Base64字符串打印出来。