how can i display a buffer data as Pdf Document in my react app?

Question

I'm trying to display a document file and download it in pdf in React, the document is uploaded it a file I used express-file-upload to do that, but I don't know how to fetch the document and display it in my react app, this is how my data look like :

{
  "Document": {
    "type": "Buffer",
    "data": [91, 111, 98, 106, 101, 99, 116, 32, 79, 98, 106, 101, 99, 116, 93]
  },
}

Is your data Buffer a vaild pdf file ? or what type of binary is it ? — Marc, May 11 '20 at 07:07
And what has this to do with a pdf file ? do you want to generate a pdf document from that data ? — Marc, May 11 '20 at 07:15
yes, that's what I'm trying to do I couldn't figure out how to do it — Riahi Rahma, May 11 '20 at 07:19
Have you read @Isolated answer ?! Take a look on the react-pdf link. In the first chapter (tl dr) is your solution mentioned. Create a base64 string from your buffer and display it via "react-pdf". — Marc, May 11 '20 at 07:22

Isolated · Answer 1 · 2020-05-11T03:05:03.907

1

const Buffer = require('buffer').Buffer;

const buff = Buffer.from('something cool');
console.log(buff);
console.log(buff.toString());

Call .toString() on the Buffer object, this will convert it into a string value.

<Buffer 73 6f 6d 65 74 68 69 6e 67 20 63 6f 6f 6c>
something cool

https://nodejs.org/api/buffer.html

how can i display a buffer data as Pdf Document in my react app?

With something like this: https://www.npmjs.com/package/react-pdf

I also came across another question that's similar to yours and is using the react-pdf library, I thought it may be useful: https://stackoverflow.com/a/45604439/2932298.

edited May 11 '20 at 03:05

answered May 11 '20 at 02:45

Isolated

2,167
14
14

my problem is I don't know how to display it as a pdf link in my react app – Riahi Rahma May 11 '20 at 02:51
Are you retrieving it from an Express API? Or is that the part your stuck on? By PDF link, I assume you're looking to add a link the PDF can be downloaded from? Or are you looking to display the PDF in React? – Isolated May 11 '20 at 03:01
I really don't know to explain, my app has an admin and a simple user, the user sends a request for leave with a file attachment, the admin receives the request and accepted it my problem is I could it figure how to display the file attachment that sends by the user . and Yes I retrieving from Express Api – Riahi Rahma May 11 '20 at 03:52
@RiahiRahma have you checked the links at the bottom of my updated answer? That may be relevant to you, assuming you've retrieved the file. Does that help? – Isolated May 11 '20 at 03:56
this is how my console in expess show [Document: ] and it still the same in my front end – Riahi Rahma May 12 '20 at 08:21

how can i display a buffer data as Pdf Document in my react app?

1 Answers1