How To Convert base64 String to PDF in React.js

Question

I have a base 64 string that is coming from an API call. I am testing with a sample base64 string and I am trying to convert it to pdf or an image to view in my react.js website.

I've tried many solutions, but nothing seems to work. I found a react js package that is called base64topdf I installed it and tried to decode the base64 string to PDF, but it gives me this error "TypeError: fs.writeFileSync is not a function"

I don't know what i am doing wrong.

How can I convert a base64 string to a PDF or an image in reactjs?

Documentation to the package https://www.npmjs.com/package/base64topdf

Here is my code:

 const base64 = require('base64topdf');

 const base64STR = "JVBERi0xLjQKJeLjz9M...." //base64 string

 const decodedBase64 = base64.base64Decode(base64STR, 'waybill');

 console.log(decodedBase64)

@ikhvjs thats a completely different thing, i want to convert to PDF — motionless570, Feb 08 '22 at 15:32

score 4 · Accepted Answer · answered Feb 08 '22 at 18:42

4

try this <embed src={`data:application/pdf;base64,${base64STR}`} />

answered Feb 08 '22 at 18:42

AKAA

136
4

1

Thank you this worked! – motionless570 Feb 08 '22 at 18:45
It works also for other type of files like pptx, docs etc. – Musiur Alam Opu May 11 '23 at 19:37

score 3 · Answer 2 · answered Feb 08 '22 at 18:51

You cannot use this package, since it is written for Node.js not for web development. If you go inside the package source code you will see that it is using the fs module or file system.

https://github.com/rpsankar001/base64topdf/blob/master/index.js#L3

For the web, you can use something like this:

function downloadPDF(pdf) {
    const linkSource = `data:application/pdf;base64,${pdf}`;
    const downloadLink = document.createElement("a");
    const fileName = "file.pdf";

    downloadLink.href = linkSource;
    downloadLink.download = fileName;
    downloadLink.click();
}

Worth mentioning, React has an upcoming feature called Server Components, that will allow you to use server-side code with React. It seems that in the near future you will be able to use the package.

See: https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html

score -1 · Answer 3 · answered Feb 08 '22 at 15:21

-1

It seems that the functions base64Decode and base64Encode should be used in NodeJS only, your React env should not be able to access fs or Buffer.

Look at he file here: https://github.com/rpsankar001/base64topdf/blob/master/index.js

Also this package seems very empty, I would prefer const decodedBase64 = atob("JVBERi0xLjQKJeLjz9M...."); //base64 string

answered Feb 08 '22 at 15:21

karkael

431
2
9

Can you please provide a full detailed answer? this doesn't help much it only let me know that i cant use this function in react only in node js – motionless570 Feb 08 '22 at 15:32
ok : use `atob` because you are in browser instead of `base64topdf`. – karkael Feb 08 '22 at 15:41

How To Convert base64 String to PDF in React.js

3 Answers3