Downloading a PDF from a base64 string in React is a common requirement when backends send file data as strings to ensure data integrity during transport. Quick Solution: The HTML Anchor Tag
For more control—such as triggering a download after an API call—you should convert the base64 string into a . This method is more memory-efficient for larger files. javascript
: On mobile browsers, direct downloads from base64 can sometimes fail. Using a Blob with URL.createObjectURL is generally more reliable across different devices. Recommended Libraries react download pdf file from base64
The simplest way to trigger a download is by using an HTML anchor tag ( ) with a .
Sorted by: 3. Nothing wrong with keeping it simple. const filename = 'filename.txt'; const b64string = 'hereisthelongbase64string. Stack Overflow Downloading base64 PDF in Javascript / React Downloading a PDF from a base64 string in
: For very large PDFs (hundreds of MBs), the "Blob" method can crash browser tabs because it keeps the entire file in RAM. In these cases, consider streaming APIs or specialized libraries like StreamSaver.js.
: Ensure your base64 string begins with data:application/pdf;base64, . If the backend only sends the raw hash, you must prepend this prefix yourself. javascript : On mobile browsers, direct downloads from
const DownloadPdf = ({ base64String, fileName }) => { // Ensure the string has the correct prefix const pdfUrl = `data:application/pdf;base64,${base64String}`; return ( Download PDF ); }; Use code with caution. Programmatic Download (Blob Method)
If you need advanced features beyond simple downloading, consider these specialized React tools:
REACT Serve file in base64 string for download - Stack Overflow
