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.

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 base64-encoded PDF

Use the PDF viewer to view a base64-encoded PDF

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