{"id":38949,"date":"2025-10-21T12:57:19","date_gmt":"2025-10-21T19:57:19","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=38949"},"modified":"2025-10-21T12:57:20","modified_gmt":"2025-10-21T19:57:20","slug":"how-to-save-a-file-in-javascript","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/questions\/how-to-save-a-file-in-javascript\/","title":{"rendered":"How to Save a File in JavaScript?"},"content":{"rendered":"\n

You generated a report in the browser, captured a drawing from a canvas, or fetched a binary from an API and now you want to let users download it. This comes up constantly in dev threads, and the solutions vary by environment and file type.<\/p>\n\n\n\n

Question:<\/h2>\n\n\n\n

Hi folks,<\/em>
What is the simplest, cross-platform way to handle file downloads and saving on the web and server side? Specifically, how to save a file in JavaScript? I need to save JSON, text, images from a canvas, and also files returned by fetch. Bonus points for Node.js tips and any guidance on choosing a good file format or handling large media.<\/em><\/p>\n\n\n\n

Answer:<\/h2>\n\n\n\n

JavaScript supports saving files in two broad contexts: in the browser to the user\u2019s device and on the server with Node.js. Let\u2019s cover some of the most reliable patterns.<\/p>\n\n\n\n

Browser: Trigger a download with Blob + a[download]<\/h3>\n\n\n\n

This approach works widely and requires no libraries. Create a Blob, generate an object URL, and click a hidden anchor with the download attribute.<\/p>\n\n\n

\/\/ Save JSON as a file<\/span>\nconst<\/span> data = { name<\/span>: \"Acme\"<\/span>, createdAt<\/span>: Date<\/span>.now() };\nconst<\/span> blob = new<\/span> Blob([JSON<\/span>.stringify(data, null<\/span>, 2<\/span>)], { type<\/span>: \"application\/json\"<\/span> });\nconst<\/span> url = URL.createObjectURL(blob);\n\nconst<\/span> a = document<\/span>.createElement(\"a\"<\/span>);\na.href = url;\na.download = \"data.json\"<\/span>; \/\/ file name for the user<\/span>\ndocument<\/span>.body.appendChild(a);\na.click();\na.remove();\nURL.revokeObjectURL(url);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Browser: Save files using the File System Access API<\/h3>\n\n\n\n
The File System Access API allows writing directly to user-selected files. It is available in Chromium-based browsers in secure contexts (https).<\/p>\n\n\n
async<\/span> function<\/span> saveTextFile<\/span>(<\/span>) <\/span>{\n\u00a0 \/\/ Prompt the user for a file location and name<\/span>\n\u00a0 const<\/span> handle = await<\/span> window<\/span>.showSaveFilePicker({\n\u00a0 \u00a0 suggestedName<\/span>: \"report.txt\"<\/span>,\n\u00a0 \u00a0 types<\/span>: [{ description<\/span>: \"Text Files\"<\/span>, accept<\/span>: { \"text\/plain\"<\/span>: [\".txt\"<\/span>] } }]\n\u00a0 });\n\u00a0 const<\/span> writable = await<\/span> handle.createWritable();\n\u00a0 await<\/span> writable.write(\"Hello from JS!\"<\/span>);\n\u00a0 await<\/span> writable.close();\n}\n\n\/\/ Fallback: if showSaveFilePicker is not available, use the Blob + a[download] pattern<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Browser: Save what you fetched<\/h3>\n\n\n\n
If your API returns a binary (e.g., PDF or image), turn the response into a Blob and use the same download approach.<\/p>\n\n\n
async<\/span> function<\/span> downloadFromApi<\/span>(<\/span>) <\/span>{\n\u00a0 const<\/span> res = await<\/span> fetch(\"\/api\/report.pdf\"<\/span>);\n\u00a0 if<\/span> (!res.ok) throw<\/span> new<\/span> Error<\/span>(\"Network error\"<\/span>);\n\u00a0 const<\/span> blob = await<\/span> res.blob();\n\u00a0 const<\/span> url = URL.createObjectURL(blob);\n\n\u00a0 const<\/span> a = document<\/span>.createElement(\"a\"<\/span>);\n\u00a0 a.href = url;\n\u00a0 a.download = \"report.pdf\"<\/span>;\n\u00a0 document<\/span>.body.appendChild(a);\n\u00a0 a.click();\n\u00a0 a.remove();\n\u00a0 URL.revokeObjectURL(url);\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Browser: Save images from a canvas<\/h3>\n\n\n\n
For a canvas element, use toBlob and then download.<\/p>\n\n\n
function<\/span> saveCanvas<\/span>(canvas<\/span>) <\/span>{\n\u00a0 canvas.toBlob(blob<\/span> =><\/span> {\n\u00a0 \u00a0 const<\/span> url = URL.createObjectURL(blob);\n\u00a0 \u00a0 const<\/span> a = document<\/span>.createElement(\"a\"<\/span>);\n\u00a0 \u00a0 a.href = url;\n\u00a0 \u00a0 a.download = \"drawing.png\"<\/span>;\n\u00a0 \u00a0 document<\/span>.body.appendChild(a);\n\u00a0 \u00a0 a.click();\n\u00a0 \u00a0 a.remove();\n\u00a0 \u00a0 URL.revokeObjectURL(url);\n\u00a0 }, \"image\/png\"<\/span>, 0.92<\/span>);\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Node.js: Write files to disk<\/h3>\n\n\n\n
On the server, use the filesystem APIs. For text or small buffers, writeFile<\/code> is enough. For large downloads, stream to disk.<\/p>\n\n\n
\/\/ Node 18+ has global fetch<\/span>\nimport<\/span> { promises as<\/span> fs } from<\/span> \"fs\"<\/span>;\nimport<\/span> { createWriteStream } from<\/span> \"fs\"<\/span>;\nimport<\/span> { pipeline } from<\/span> \"stream\/promises\"<\/span>;\n\n\/\/ Simple write<\/span>\nawait<\/span> fs.writeFile(\"data.json\"<\/span>, JSON<\/span>.stringify({ ok<\/span>: true<\/span> }, null<\/span>, 2<\/span>));\n\n\/\/ Stream a large file from a URL to disk<\/span>\nconst<\/span> res = await<\/span> fetch(\"https:\/\/example.com\/large-video.mp4\"<\/span>);\nif<\/span> (!res.ok) throw<\/span> new<\/span> Error<\/span>(\"Failed to download\"<\/span>);\nawait<\/span> pipeline(res.body, createWriteStream(\"video.mp4\"<\/span>));<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Pick the right format and name<\/h3>\n\n\n\n