# convert Base64 to PDF file in Javascript **URL:** \ **Category:** web dev\ **Created:** [July 30, 2020, 8:43pm UTC](https://forum.kirupa.com/t/convert-base64-to-pdf-file-in-javascript/643722 "2020-07-30T20:43:29Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![Umair\_Ashraf](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/umair_ashraf/32/11705_2.png) [@Umair\_Ashraf](https://forum.kirupa.com/u/Umair_Ashraf)\ **Post date:** [July 30, 2020, 8:43pm UTC](https://forum.kirupa.com/t/convert-base64-to-pdf-file-in-javascript/643722/1 "2020-07-30T20:43:29Z")
i am struggling to display the PDF as attachment in ReactJS. i have managed to bring the base64 to the fornt end but after i try to create the blob object it doesnt work and although it goes to the Acrobate reader but shows the error. any suggestions please as how cna i convert base64 to pdf correctly. - **NodeJS baackend code** responding to API call ```javascript let token = req.cookies.access_token; if (token) { let Invoice_No_Actual = req.body.invoice_Name; res.set("Content-disposition", "attachment; filename=" + `${__dirname}\\` + `${Invoice_No_Actual}` + `.pdf`); res.contentType("application/pdf"); res.send(`data:application/pdf;base64,${new Buffer.from(data).toString("base64")}`); } }); ``` - **Frontend code** API call ```javascript const headers = new Headers(); headers.append("content-type", "application/json"); headers.append("responseType", "application/pdf"); const options = { method: "POST", headers, credentials: "include", body: JSON.stringify(invoice_Object), // body: "My HTML String", }; const newRequest = new Request("http://localhost:5000/api/invoice-only", options); (async () => { const invoice_Call = await fetch(newRequest) .then((res) => { return text1 = res.text(); }) .then((data) => { generateFile(data, invoice_Name); }); })(); }; ``` - **generateFile()** function call after receiving the response ```javascript let generateFile = (content, fileName) => { console.log("content", content); // here at console if i copy the code and use online tool(https://base64.guru/converter/decode/pdf) it shows the correct pdf const blob = new Blob([content], { type: "application/pdf" }); console.log(blob); const link = document.createElement("a"); link.href = window.URL.createObjectURL(blob); link.download = fileName; link.click(); }; ``` \*Below error comes up when try to open the pdf ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/2/272cdab8f950ad4827b14825cd050ac3335810c8.png) ---
**Author:** ![Umair\_Ashraf](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/umair_ashraf/32/11705_2.png) [@Umair\_Ashraf](https://forum.kirupa.com/u/Umair_Ashraf)\ **Post date:** [July 30, 2020, 8:52pm UTC](https://forum.kirupa.com/t/convert-base64-to-pdf-file-in-javascript/643722/2 "2020-07-30T20:52:40Z")
Just to add… `Note:` just before creating the blob object i use console.log(“content”, content) and if i copy the content from the console to online tool([https://base64.guru/converter/decode/pdf](https://base64.guru/converter/decode/pdf)) it convert perfectly to PDF file ---
**Author:** ![Umair\_Ashraf](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/umair_ashraf/32/11705_2.png) [@Umair\_Ashraf](https://forum.kirupa.com/u/Umair_Ashraf)\ **Post date:** [July 31, 2020, 10:14am UTC](https://forum.kirupa.com/t/convert-base64-to-pdf-file-in-javascript/643722/3 "2020-07-31T10:14:43Z")
I have also uploaded the base64 code that i am getting when console logging at pastebin, [https://pastebin.com/W4zEXyPy](https://pastebin.com/W4zEXyPy) one more point to mention as we can see the code in the attachment starts with `data:application/pdf;base64,JVBERi0xL........` i have read few places around that i have to somehow remove the `data:application/pdf;base64` bit from the code but not sure how can i achieve this. ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [July 31, 2020, 9:07pm UTC](https://forum.kirupa.com/t/convert-base64-to-pdf-file-in-javascript/643722/4 "2020-07-31T21:07:17Z")
Can you do a diff of your file’s contents, what your console.log generates, and what base64.guru generates? There must be some value that needs to be set that currently isn’t. ---
**Author:** ![Umair\_Ashraf](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/umair_ashraf/32/11705_2.png) [@Umair\_Ashraf](https://forum.kirupa.com/u/Umair_Ashraf)\ **Post date:** [August 3, 2020, 1:21pm UTC](https://forum.kirupa.com/t/convert-base64-to-pdf-file-in-javascript/643722/5 "2020-08-03T13:21:03Z")
Thanks Kirupa, i am not sure if i can compare two files word to word, but looking at the base64.guru i can seeit found invalid string and invalid character and these all found in the start of the file content. and looking at the repaired base64 the content starts from `JVBERi0xLjQKMSAw....` i have tried to use `content.slice(29);` so it will start from `JVB...` but getting the same error. any advise how can i achieve it please ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/d/dfb6411397b7881b414b8cc900281a363f25a174.png) **update** : so i found an online tool to check the file content differentiate at [Diffchecker - Compare text online to find the difference between two text files](https://www.diffchecker.com/diff) and when i remove the `data:application/pdf;base64,` from the original one it is then identical to the repair one, so i guess only this is the difference in both the files ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [August 4, 2020, 2:28am UTC](https://forum.kirupa.com/t/convert-base64-to-pdf-file-in-javascript/643722/6 "2020-08-04T02:28:26Z")
Yep! I think if you get both PDFs to be identical, then the PDF will open correctly.