A Blob (Binary Large Object) is a data structure used to store raw data. It can be created using the Blob constructor. For instance:
const myBlob = new Blob(['Hello, world!'], { type: 'text/plain' });
You can use Blobs to create URLs, which can be directly embedded into HTML documents. For example, you can create a Blob containing text data and then generate a download link for it. When the user clicks this link, they can download the Blob content as a file. This is shown below:
<html>
<head/>
<body>
<h1>Download Blob Example</h1>
<script>
const createDownloadLink = (content, filename) => {
// Create a Blob from the content
const blob = new Blob([content], { type: 'text/plain' });
// Create a URL for the Blob
const url = URL.createObjectURL(blob);
// Create an <a> element
const a = document.createElement('a');
a.href = url;
a.download = filename;
a.textContent = `Download ${filename}`;
// append to body
document.body.appendChild(a);
// revoke URL after some time or on user action
// URL.revokeObjectURL(url);
}
createDownloadLink('some content', 'example.txt');
</script>
</body>
</html>
You can also use a Blob to dynamically generate code and create JavaScript files on-the-fly! Here’s an example of how to create a Web Worker from a Blob:
<html>
<head/>
<body>
<h1>Web Worker Blob Example</h1>
<p id="result"></p>
<script>
const workerScript = `
onmessage = e => {
postMessage(e.data * 2);
};
`;
const blob = new Blob([workerScript], { type: 'application/javascript' });
const url = URL.createObjectURL(blob);
const worker = new Worker(url);
worker.onmessage = e => {
document.getElementById('result').textContent = 'Worker result: ' + e.data;
URL.revokeObjectURL(url); // Clean up Blob URL
};
worker.postMessage('2');
</script>
</body>
</html>
