Expand description
§leptos-pdf
leptos-pdf is a lightweight Leptos component library for rendering and viewing PDF files
in a Leptos app using PDFium via the
pdfium-render crate.
It provides an idiomatic Leptos interface for embedding PDFs in Rust + WebAssembly apps, with canvas-based rendering.
§Installation and Supported Leptos Versions
Add leptos-pdf to your project using the version that matches your Leptos version:
| Leptos Version | Command |
|---|---|
| 0.8 | cargo add leptos-pdf@0.8 |
| 0.7 | cargo add leptos-pdf@0.7 |
Each leptos-pdf release tracks the same minor version of Leptos (e.g. leptos-pdf 0.8.x works with leptos 0.8.x).
§Example
use leptos::prelude::*;
use leptos_pdf::prelude::*;
#[component]
fn App() -> impl IntoView {
view! {
<main>
<div style:width="100vw" style:height="100vh">
<PdfiumProvider>
// If the pdfium-bundled feature is not enabled, you must provide your own URL:
//
// <PdfiumProvider src="/public/pdfium/pdfium.js">
//
// With this setup, make sure that /public/pdfium/pdfium.wasm also exists, and
// you modify your index.html to include these files
<PdfViewer
url="/public/sample.pdf"
loading_fallback=move || view! { <p>"Loading..."</p> }
error_fallback=move |e| {
view! { <p>"An error occurred..."</p> }
}
/>
</PdfiumProvider>
</div>
</main>
}
}
fn main() {
mount_to_body(App)
}
See the components module for more information on PDF rendering.
§Getting Started
PDFium is a vendor dependency (JavaScript + WASM). You can provide it in one of two ways:
-
Manual assets (recommended if you want full control).
Download the PDFium WASM distribution from the pdfium-binaries repository (grab the latest WASM release), and place the files in your app’s assets directory (for example,
public/).If you use Trunk, ensure the directory is copied into the build output:
<link data-trunk rel="copy-dir" href="public/" />Then initialize PDFium with
PdfiumProviderand point it at yourpdfium.js:use leptos::prelude::*; use leptos_pdf::prelude::*; #[component] fn Demo() -> impl IntoView { view! { <PdfiumProvider src="/public/pdfium/pdfium.js"> // ... </PdfiumProvider> } }Make sure the referenced
pdfium.jscan locate its accompanyingpdfium.wasm(typically by keeping them in the same directory).For more information on how to bundle PDFium, see
pdfium-render’s guide on compiling to WASM. -
Bundled assets (zero setup).
Enable the
pdfium-bundledfeature when addingleptos-pdf. This embeds PDFium’s JavaScript and WASM bytes into your binary and serves them viablob:URLs at runtime. This is the easiest option, but the embedded PDFium version are not updated on a fixed schedule.
§Features
pdfium-bundled: Embed PDFium’s JavaScript and WASM and serve them viablob:URLs at runtime.
Modules§
- components
- UI components for rendering PDF documents in a Leptos application.
- errors
- Error types used by
leptos-pdf. - prelude
- Convenient re-exports for
leptos-pdf.