How to render pdf/doc/img in reactjs component

Question

I'm working on a reactjs project which has some files stored in the AWS s3 bucket. So when I try to view those files via iframe it doesn't get loaded & also I tried react-file-viewer package then it will give me errors of memory overflow and app crash.

Below is the file which I'm trying to download as a sample : https://ciao-live.s3.ap-south-1.amazonaws.com/CIAO_ERP/Documents/CustomerDocuments/1581489168529-pdf-sample.pdf

How can I solve this?

Update

I have got a solution unfortunately, this won't work for my AWS files, it will only download the files when it's in AWS S3 bucket:

 <object            width="100%"
                    height="100%"
                    data="https://ciao-live.s3.ap-south-1.amazonaws.com/CIAO_ERP/Documents/CustomerDocuments/1581489168529-pdf-sample.pdf"
                    type="application/pdf"
                  >
                    File Load Fails!
                  </object>

Refer this link stackoverflow.com/questions/45596329/display-pdf-in-reactjs — chandan_kr_jha
– chandan_kr_jha, Commented Feb 12, 2020 at 11:46
thank you! i have tried <object width="100%" height="400" data="africau.edu/images/default/sample.pdf" type="application/pdf"> </object> which is working :) — Nipun Upekshana
– Nipun Upekshana, Commented Feb 12, 2020 at 11:53
unfortunately, this won't work,it will only download the files when it's in aws s3bucket: <object width="100%" height="100%" data="ciao-live.s3.ap-south-1.amazonaws.com/CIAO_ERP/Documents/…" type="application/pdf" > File Load Fail! </object> please help me to solve this! Thanks So much! — Nipun Upekshana
– Nipun Upekshana, Commented Feb 12, 2020 at 12:39
i have solved it, problem is on aws where im uploading the file it forogot to set content type , after i set it files are opening without any problem.. — Nipun Upekshana
– Nipun Upekshana, Commented Feb 13, 2020 at 4:11

Oshini · Accepted Answer · 2020-02-12 11:02:04Z

-1

Try with below code. only this help for image

import img from "../../assets/img/logo(name).svg"; //Try to import your image using AWS s3 bucket

   render() {
        return (
            <div className="content" style={{ overflow: "auto"}}>
                 <img id="logo-img" src={img} alt="logo" /> 
            </div>
       )
    }

answered Feb 12, 2020 at 11:02

Oshini

6416 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nipun Upekshana Over a year ago

thank you! I have fixed with the image but still struggling on pdf & docs. I have tried iframe but it will automatically download the pdf file.

Collectives™ on Stack Overflow

How to render pdf/doc/img in reactjs component

Update

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related