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

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

Property	Description
HTTPS or Base64 URL	URL or base64 encoded URL to PDF, png, or jpeg file
Visible	Set true to show and false to hide. Set dynamically using Javascript with {{}}
Loading Animation	Controls the loading state of the component, values are a boolean