const downloadPDF = (base64String, fileName) => { const linkSource = `data:application/pdf;base64,${base64String}`; const downloadLink = document.createElement("a"); downloadLink.href = linkSource; downloadLink.download = fileName; downloadLink.click(); }; Use code with caution. Method 3: Converting Base64 to a Blob (For Large Files)
const handleDownload = (base64Data, filename) => { // 1. Convert base64 to raw binary data held in a string const byteCharacters = atob(base64Data); const byteNumbers = new Array(byteCharacters.length); for (let i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i); } const byteArray = new Uint8Array(byteNumbers); // 2. Create a blob from the byte array const blob = new Blob([byteArray], { type: 'application/pdf' }); // 3. Create a link and trigger the download const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = filename; document.body.appendChild(link); link.click(); // 4. Cleanup document.body.removeChild(link); URL.revokeObjectURL(url); }; Use code with caution. Libraries to Consider download pdf from base64 react
Easy to implement; requires no extra logic. Cons: Browsers have URL length limits that can cause large PDFs to fail. Method 2: Dynamic Download Function (Recommended) const downloadPDF = (base64String, fileName) => { const
This approach is more robust because it programmatically creates a temporary link, triggers a click, and then cleans up. This is ideal for handling data received via an onClick event or from an API response. javascript Cons: Browsers have URL length limits that can