The download attribute works more consistently across browsers when paired with a Blob URL. Troubleshooting Common Issues 1. "The PDF is Corrupt"
You can now call this function using the onclick attribute on a button or link: onclick download base64 pdf
Chrome and other browsers have limits on how long a URL can be (usually around 2MB). Large PDFs will crash or fail to download. Large PDFs will crash or fail to download
URL.createObjectURL is much more memory-efficient for large files. Ensure your string starts with the actual Base64
This usually happens because the "Data URI header" was not stripped. Ensure your string starts with the actual Base64 data, not data:application/pdf;base64, . The split(',')[1] logic in the code above handles this automatically. 2. Content Security Policy (CSP)
function downloadPDF(base64String, fileName) base64String; // 2. Decode Base64 to binary const byteCharacters = atob(base64WithoutHeader); const byteNumbers = new Array(byteCharacters.length); for (let i = 0; i < byteCharacters.length; i++) byteNumbers[i] = byteCharacters.charCodeAt(i); const byteArray = new Uint8Array(byteNumbers); // 3. Create a Blob from the byte array const blob = new Blob([byteArray], type: 'application/pdf' ); // 4. Create a temporary URL for the Blob const url = window.URL.createObjectURL(blob); // 5. Create a hidden anchor element and trigger the download const link = document.createElement('a'); link.href = url; link.download = fileName; document.body.appendChild(link); link.click(); // 6. Cleanup: remove the element and revoke the URL document.body.removeChild(link); window.URL.revokeObjectURL(url); Use code with caution. 2. The HTML Trigger