How to load PDF file inside of iFrame? Working in React

Question

I'm trying to load pdf file inside of iFrame in REACT, the code looks like this:

render(){
   return(
      <iframe
          sandbox="allow-same-origin allow-scripts allow-forms"
          title="PortletIFrameWidget"
          src={'.resources/crayola.pdf'}
          ref={(f) => { this.ifr = f }}
      />
   )
}

and I'm getting a warning:

Resource interpreted as Document but transferred with MIME type application/pdf: "http://localhost:8080/resources/crayola.pdf"

but when I go to the link: "http://localhost:8080/resources/crayola.pdf" I can easily see the content of PDF, so there is the pdf file, the problem is: it's not being uploaded/rendered in iFrame. Why?

THIS WORKS IN MOZILLA FIREFOX, AND IN EDGE, but not in CHROME.

any idea why is this happening? And how to load PDF file in iFrame in REACT

This has nothing to do with React, check this out stackoverflow.com/questions/19654577/html-embedded-pdf-iframe — kkkkkkk
– kkkkkkk, Commented Jul 24, 2018 at 9:33
Try Using Ref in React, and set the src attribute after initial rendering — keshav gupta
– keshav gupta, Commented Jul 7, 2022 at 4:24

Zahi Enix · Accepted Answer · 2018-07-24 09:58:11Z

5

this has nothing to do with React, the problem obviously is in GOogle-Chrome. here's the solution I made:

<iframe src="./resources/crayola.pdf" title="title">
     Presss me: <a href="./resources/crayola.pdf">Download PDF</a>
</iframe>

and the link that helped me: PDFobject

answered Jul 24, 2018 at 9:58

Zahi Enix

9264 gold badges13 silver badges30 bronze badges

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

Comments

shlgug · Accepted Answer · 2021-04-05 20:51:50Z

4

Try using an embed tag:

<embed src={'.resources/crayola.pdf'} type="application/pdf"/>

answered Apr 5, 2021 at 20:51

shlgug

1,3662 gold badges11 silver badges12 bronze badges

Comments

keshav gupta · Accepted Answer · 2022-07-07 04:28:47Z

1

In React, Use Ref in Functional Component and set after your initial rendering using setAttribute

function App() {
  const refIframe: any = useRef(null);
  
  useEffect(() => {
       refIframe.current.setAttribute(
        'src',
        './resources/crayola.pdf',
    );
  }, []);
  return (
      <iframe
        title="Iframe Doc"
        ref={refIframe}
      />
  );
}

export default App;

answered Jul 7, 2022 at 4:28

keshav gupta

1751 gold badge2 silver badges7 bronze badges

1 Comment

rantao Over a year ago

Why do this over just setting the attribute statically?

Collectives™ on Stack Overflow

How to load PDF file inside of iFrame? Working in React

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related