Embedding a SharePoint PDF document in an iframe shows a blurry document at the same zoom level compared to opening the document directly in SharePoint

Question

We have an application where we use SharePoint APIs to get documents and its information. Once we have the document IDs, we then allow to launch the SharePoint documents within an iframe in the application. However, we noted that the SharePoint PDFs within an iframe have blurry text compared to opening the PDF file directly in a separate browser tab by using the same URL that is being used in the iframe.

Image of the rendering of PDF in iframe: (URL template we use for embedding: https://<sharepoint_site>/:b:/r/sites/FinancialDocs/_layouts/15/WopiFrame2.aspx?sourcedoc={<document_id>}&action=interactivepreview). The URL is typically what we receive from the SharePoint API itself

Image of the PDF when opened directly in SharePoint without embedding in our application:

Has anybody faced a similar issue? Any pointers to any alternatives would be greatly appreciated.

Answer 1

Hi @Jacky Gehani ,
I suggest you can try out this embed code and see the result. You can change the width and height number to adjust the size to display PDF file. And paste your SharePoint PDF file link into Your PDF file link here section.

Note: Make sure your PDF file link is a public link to ensure everyone can access this PDF file/ Otherwise there might be some permission issue to view the file.

You can generate the PDF file link in SharePoint site by selecting the PDF file > copy link and insert into embed code above.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

---

Answer 2

Thank you for your response earlier.

We cannot make the pdf link public as it contains sensitive information. Do we have any alternate method where we can add some permissions to allow access within the iFrame without making the URL public?

We see the following security error when we try to access the embed URL within the iFrame.
Refused to frame 'https://zenopticsshare.sharepoint.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' teams.microsoft.com *.teams.microsoft.com *.skype.com *.teams.microsoft.us local.teams.office.com *.powerapps.com *.yammer.com *.officeapps.live.com *.office.com *.stream.azure-test.net *.microsoftstream.com *.dynamics.com".