This content originally appeared on DEV Community and was authored by Ramu Narasinga
In this article, we will review the function, downloadInBrowser, in Refine source code.
export const downloadInBrowser = (
filename: string,
content: string,
type?: string,
) => {
if (typeof window === "undefined") {
return;
}
const blob = new Blob([content], { type });
const link = document.createElement("a");
link.setAttribute("visibility", "hidden");
link.download = filename;
const blobUrl = URL.createObjectURL(blob);
link.href = blobUrl;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// As per documentation, call URL.revokeObjectURL to remove the blob from memory.
setTimeout(() => {
URL.revokeObjectURL(blobUrl);
});
};
Function definition:
export const downloadInBrowser = (
filename: string,
content: string,
type?: string,
) => {
This accepts 3 parameters:
filename
content
type
if (typeof window === "undefined") {
return;
}
const blob = new Blob([content], { type });
If the typeof window is undefined, function returns. blob is assigned an instance of Blob with content and type.
const link = document.createElement("a");
link.setAttribute("visibility", "hidden");
link.download = filename;
const blobUrl = URL.createObjectURL(blob);
link.href = blobUrl;
link is created here with createElement. For this anchor tag, visibility is hidden, download is set to filename and blob from earlier is convert to blobUrl and href is set to blobUrl
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// As per documentation, call URL.revokeObjectURL to remove the blob from memory.
setTimeout(() => {
URL.revokeObjectURL(blobUrl);
});
Here, link is appended to the document.body and link is clicked so as to download the file. As part of cleanup, first the link is removed from the DOM and URL.revokeObjectURL is called with blobUrl
As per documentation, call URL.revokeObjectURL to remove the blob from memory.
I guess, it is important to remove the blob from the memory.
About me:
Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.
I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com
My Github — https://github.com/ramu-narasinga
My website — https://ramunarasinga.com
My Youtube channel — https://www.youtube.com/@thinkthroo
Learning platform — https://thinkthroo.com
Codebase Architecture — https://app.thinkthroo.com/architecture
Best practices — https://app.thinkthroo.com/best-practices
Production-grade projects — https://app.thinkthroo.com/production-grade-projects
References:
This content originally appeared on DEV Community and was authored by Ramu Narasinga
Ramu Narasinga | Sciencx (2025-03-28T04:47:31+00:00) downloadInBrowser function in Refine source code.. Retrieved from https://www.scien.cx/2025/03/28/downloadinbrowser-function-in-refine-source-code/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.