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 |