Skip to main content

PDF Viewer

View PDF documents and images within your app

Insert PDF documents and images into your apps by providing a hosted URL for the document to be viewed, or by providing a base64-encoded URL with the PDF contents. Hosted PDFs must use https or they will not be allowed to load.

Use the HTTPS or Base64 URL property to point to your PDF

How to view an HTTPS PDF

If you want to show the same PDF every time, type the entire file URL into the HTTPS or Base64 URL property. If the PDF changes conditionally then you need to use {{ }} bindings. For example, to dynamically show a PDF based on the user's selected table row, set the HTTPS or Base64 URL to:

{{Table1.selectedRow.documentUrl}}

How to view a PDF from Google Drive

If your PDF is on Google Drive and is publically accessible, you will need to change the URL from /view to /preview

Navigate to your PDF in Google Drive and open your PDF in a new window.

Open and retrieve the URL for your PDF in Google Drive

Grab the URL and set it in HTTPS or Base64 URL of your PDF component and change the end from /view to /preview.

Change the URL to use preview instead of view
info

If you don't change the /view to /preview, we will get a 403 Forbidden error because Google is presenting HTML with a PDF inside.

Enter the URL into your PDF component

How to view a Base64-encoded PDF

info

It is important to note that most modern browsers have limits on the size of a Data URL. For example, Google Chrome supports up to 2MB. If your PDF is larger than these limits, it may not load properly. For larger files, a hosted HTTPS URL should be used.

Use the PDF viewer to view a base64-encoded PDF
When your PDF requires authentication or contains other logic to open, you will need to convert the PDF to Base64.

Create a new API in Superblocks using the Python step. Replace the example URL with your URL:

import requests
import base64

r = requests.get("http://tdc-www.harvard.edu/Python.pdf")
return "data:application/pdf;base64," + base64.b64encode(r.content).decode()

Connect your API to the "HTTPS or Base64 URL" property of the PDF Viewer using bindings:

{{API1.response}}

PDF Viewer Properties

Component Properties

PropertyDescription
HTTPS or Base64 URLURL or base64 encoded URL to PDF, png, or jpeg file
VisibleSet true to show and false to hide. Set dynamically using JavaScript with {{}}
Loading AnimationControls the loading state of the component, values are a boolean