convert Base64 to PDF file in Javascript

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
 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
    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
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

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) it convert perfectly to PDF file

I have also uploaded the base64 code that i am getting when console logging at pastebin, 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.

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.

1 Like

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

update: so i found an online tool to check the file content differentiate at 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