5

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

Zack Zilic
  • 832
  • 3
  • 12
  • 28
  • 1
    This has nothing to do with React, check this out https://stackoverflow.com/questions/19654577/html-embedded-pdf-iframe – kkkkkkk Jul 24 '18 at 09:33
  • Try Using Ref in React, and set the src attribute after initial rendering – kesh Jul 07 '22 at 04:24

3 Answers3

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

Zack Zilic
  • 832
  • 3
  • 12
  • 28
4

Try using an embed tag:

<embed src={'.resources/crayola.pdf'} type="application/pdf"/>
shlgug
  • 1,320
  • 2
  • 11
  • 12
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;
kesh
  • 145
  • 1
  • 2
  • 7