data:text/html; charset=utf-8;base64,pgh0bww+pgjvzhk+pc9ib2r5pjwvahrtbd4=
Hi, everyone; today we are going to discuss data: text/html; charset=utf-8;base64,pgh0bww+pgjvzhk+pc9ib2r5pjwvahrtbd4=; what is base64 URL encoding? How do you display base64 text files in HTML? To do so, you need to keep reading the article.
Table of Contents
What Is Base64 URL Encoding? 
Base64 URL is a variation of the standard Base64 encoding method used to enhance compatibility with URLs and file names. Here are some key things to know about base64 URL encoding: Here are some key things to know about base64 URL encoding:
- It uses a new character encoding that replaces certain characters with safer characters that may challenge the URL. More specifically, this is done by substituting + with—and / with _, which removes = and eliminates the padding = characters.
- The changes are more suitable for scenarios such as encoding data for GET HTTP requests, naming files, etc., as they only involve URL-safe characters.
- It loses slightly more compression efficiency for the opportunity to exclude characters that would otherwise be escaped for URLs.
- Base64 URL-encoded strings are about 1. 5 bytes larger than plain base64-encoded strings of the same data, but they can be directly used in URLs and filenames.
- Decoding and encoding are the same as the normal base64; only here is the decoder supposed to know about the second alphabet used and translate—and _ back to + and / accordingly. It does not matter if any padding needs to be included when decoding the data.
This base64 URL encoding enables the encoded data to be used in URLs, filenames, and other instances where URL-safe data is feasible. This is especially important for passing non-text data to places designed for text-based transmission.
How do you display Base64 Encoded String and Base64 text files in HTML?
Here are a few ways to display base64 encoded strings and files in HTML: Here are a few ways to display base64 encoded strings and files in HTML:
To display a base64 encoded string: To display a base64 encoded string:
“`html
<div id=”base64″></div>
<script>
var encodedData = “SGVsbG8gV29ybGQ=”;
document.getElementById(“base64”).innerHTML = atob(encodedData);
</script>
“`
The top () method parses the base64 string into its corresponding plain text.
To display a base64 encoded text file: To display a base64 encoded text file:
“`HTML
<div id=”file”></div>
<script>
fetch(“data.txt”)
.then(response => response.text())
.then(contents => {
var base64 = btoa(contents);
document.getElementById(“file”).innerHTML = atob(base64);
});
</script>
“`
This fetches the file, encodes it into base 64, and decodes and prints them.
What is base64 encoding vs UTF-8? 
The main differences between base64 encoding and UTF-8:The main differences between base64 encoding and UTF-8:
- Base64 encoding encodes binary data into ASCII code to transfer it through a system supporting only ASCII characters. UTF-8 is a form of Unicode character encoding supported by most operating systems.
- Base64 expands the file size to about 33% compared to binary information content. UTF-8 has variable width; therefore, file size is subject to change in response to the contents of the text.
- For example, while Base64 applies to general binary data, UTF-8 applies to Unicode text specifically.
- Base64 encoding remain used in such scenarios as email attachments, a part of HTTP authentication, and storing binary data as JSON. UTF-8 remains arguably the most frequently used character encoding on the WWW and with the text files.
Therefore, base 64 and UTF-8 remain established for different roles: base 64 converts binaries to texts, while UTF-8 encodes Unicode texts.
Conclusion:
This post discussed data: text/html; charset=utf-8;base64,pgh0bww+pgjvzhk+pc9ib2r5pjwvahrtbd4=. Please check this. In the comment section, let me know whether you found the article helpful.
