I am working on different ways of displaying a PDF to get better on a project at work. I am able to insert a url to a PDF into an iframe element and it displays the PDF fine. Sometimes we have a use case where the front end receives a pdf as application/pdf instead of a url in a json object.

For this, I turn the application/pdf into a blob and create a url for the blob. This worked great on everything except Android, so I am testing out some methods with iFrame.

I would like to take this sample pdf .pdf, turn it into a blob, and insert the blob url in the src of an iframe element for the purposes of testing blobs as iframe sources on Android Chrome browsers.

function App() {
  const samplePdf = ".pdf"

  const blob = new Blob([samplePdf], { type: 'application/pdf' });

  const url = URL.createObjectURL(blob)

  return (
    <>
      <h1>iFrame Rendering of PDF Blob</h1>
      <iframe title="pdf" src={url} style={{ height: '1250px', width: '100%' }}></iframe>
    </>
  );
}

export default App;

This is what renders in the React app

What am I missing to get the content of the pdf to display? React is not a requirement, just seemed an easy way to start a quick practice project.

I am working on different ways of displaying a PDF to get better on a project at work. I am able to insert a url to a PDF into an iframe element and it displays the PDF fine. Sometimes we have a use case where the front end receives a pdf as application/pdf instead of a url in a json object.

For this, I turn the application/pdf into a blob and create a url for the blob. This worked great on everything except Android, so I am testing out some methods with iFrame.

I would like to take this sample pdf http://www.pdf995./samples/pdf.pdf, turn it into a blob, and insert the blob url in the src of an iframe element for the purposes of testing blobs as iframe sources on Android Chrome browsers.

function App() {
  const samplePdf = "http://www.pdf995./samples/pdf.pdf"

  const blob = new Blob([samplePdf], { type: 'application/pdf' });

  const url = URL.createObjectURL(blob)

  return (
    <>
      <h1>iFrame Rendering of PDF Blob</h1>
      <iframe title="pdf" src={url} style={{ height: '1250px', width: '100%' }}></iframe>
    </>
  );
}

export default App;

This is what renders in the React app

What am I missing to get the content of the pdf to display? React is not a requirement, just seemed an easy way to start a quick practice project.

• javascript
• pdf
• iframe
• blob

• 1 This reads like it could be an XY problem: you report having issues under android with blob URLs , but post a "solution" example that doesn't work on any platform, and is attracting answers that require createObjectURL to work. You may two questions, but please consider asking and providing details of the android problem first. – traktor Commented Aug 19, 2022 at 23:43

1 Answer 1

You need the data to construct the blob while the URL just points to the data you need. Let's go & get it:

const getLocalPdfUrl = async () => {
  const url = 'http://www.pdf995./samples/pdf.pdf';

  const response = await fetch(url);
  const blob = await response.blob();

  return URL.createObjectURL(blob);
};

This function returns a Promise that will (hopefully) resolve with the URL you can use to construct the iframe. It's async, so, don't forget to wait for the promise to resolve.

Testing note
Fetching external resources from the frontend is restricted by CORS, so, pdf995.'s link will not work. It's also not a trivial task to find a dummy PDF document that would allow fetching itself from the FE.

To test if it works, I'd propose to place the PDF file in the /public folder (or similar) & serve it on the same localhost as the app.