Streamlit PDF Viewer

0.0.28 · active · verified Thu Apr 16

streamlit-pdf-viewer is an active Streamlit component designed for visualizing and manipulating PDF documents directly within Streamlit applications. It currently stands at version 0.0.28, with a consistent release cadence, frequently adding new features like scroll behavior, zoom controls, and annotation capabilities. The library leverages pdf.js for rendering and supports annotations, text rendering, and various display options.

Common errors

```
TypeError: Cannot read properties of null (reading 'length')
```
cause This error often occurs in the browser's JavaScript console when `pdf_viewer` receives `None` or an unexpected null value instead of valid PDF data, particularly after an `st.file_uploader` has been cleared or if the uploaded file is not persisted correctly across reruns.

fix Ensure that the data passed to `pdf_viewer` is always valid PDF bytes or a URL. For `st.file_uploader`, store the uploaded file's `getvalue()` in `st.session_state` and retrieve it from there before passing to the viewer. Add checks to ensure the data is not `None`.
```
FileNotFoundError: [Errno 2] No such file or directory: 'your_document.pdf'
```
cause This typically happens when attempting to display a local PDF file using a relative or inaccessible path, especially in deployed Streamlit applications (like Streamlit Cloud). The Streamlit server's working directory or file system access might differ from local development.

fix For local files, it's recommended to either use `st.file_uploader` (which handles reading the file into memory) or read the file into bytes explicitly (e.g., `with open('path/to/file.pdf', 'rb') as f: pdf_bytes = f.read()`) and pass the bytes to `pdf_viewer`. Ensure any local paths used are absolute and accessible by the Streamlit process.
```
PDF viewer displays a blank area or does not load on Streamlit Cloud (or specific browsers like Chrome/Edge).
```
cause Deployment environments (like Streamlit Cloud) or specific browser versions/settings can sometimes interfere with how the component renders the PDF, even if it works locally. Browser compatibility issues for web components are sometimes reported.

fix First, ensure all `warnings` related to width and session state are addressed. Check the browser's developer console for JavaScript errors. Try accessing the deployed app in different browsers (e.g., Firefox has shown better compatibility in some cases). Ensure the PDF source (URL or uploaded bytes) is valid and accessible from the deployment environment.

Warnings

breaking Version 0.0.27 removed legacy methods for rendering PDF documents. If your application relied on older rendering mechanisms, this update will break compatibility.
Fix: Review the official documentation and adapt your code to use the current `pdf_viewer` function signature and parameters. The `legacy` parameter or explicit legacy calls are no longer supported.
gotcha When embedding the PDF viewer within Streamlit tabs or expanders, it is mandatory to specify a `width` parameter. Without it, the viewer may not render correctly or appear blank on tabs that are not immediately visible.
Fix: Always provide an explicit `width` parameter (e.g., `width=700` or `width='100%'`) when using `pdf_viewer` inside `st.tabs` or `st.expander` components.
gotcha The `UploadedFile` object from `st.file_uploader` can be lost on subsequent Streamlit reruns, leading to a blank viewer or errors if not handled. This is common when users interact with other widgets.
Fix: Store the `UploadedFile` (or its byte content) in `st.session_state` after it's uploaded. Always retrieve the PDF data from `st.session_state` for viewing to ensure persistence.
gotcha Some users have reported an 'Invalid Canvas Size error' when trying to display certain PDF documents.
Fix: This issue is often PDF-specific. If encountered, try simplifying the PDF (e.g., re-saving it with a PDF editor) or investigate the specific content of the problematic PDF. Report the issue on the GitHub repository with the problematic PDF if it persists.

Install

pip install streamlit-pdf-viewer Install latest version

Imports

pdf_viewer

from streamlit_pdf_viewer import pdf_viewer

Quickstart

This quickstart demonstrates how to display a PDF from a URL and how to upload and display a PDF file using `st.file_uploader`, ensuring the uploaded file persists across Streamlit reruns with `st.session_state`.

import streamlit as st
from streamlit_pdf_viewer import pdf_viewer
import os

st.set_page_config(layout="wide")

# Example 1: Display a PDF from a URL
st.subheader("PDF from URL")
pdf_viewer("https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf", width=700)

# Example 2: Display an uploaded PDF file
st.subheader("Upload and View PDF")

# Initialize session state for the uploaded file to persist across reruns
if 'uploaded_pdf_file' not in st.session_state:
    st.session_state.uploaded_pdf_file = None

uploaded_file = st.file_uploader("Choose a PDF file", type=("pdf"), key="pdf_uploader")

if uploaded_file is not None:
    st.session_state.uploaded_pdf_file = uploaded_file.getvalue()

if st.session_state.uploaded_pdf_file is not None:
    pdf_viewer(st.session_state.uploaded_pdf_file, width=700, height=600)
else:
    st.info("Please upload a PDF file to view.")

view raw JSON →