<pdf-file> PDF file element

Try it

<pdf-file id=f src=//new.webpdf.pro/forms.pdf></pdf-file>

<pdf-page of=f scale=0.5></pdf-page>
<pdf-page of=f no=2 scale=0.5></pdf-page>

The above example loads one file and shows two of its pages. Type into a field on either page: the file holds the form, so both pages show the same values, and save() writes them into the PDF.

Attributes

This element includes the global attributes. Attributes marked as multi-homed also work on the WebPDF <script> and (for pages) on the <pdf-file>: the nearest element that has one wins; see Multi-homed attributes.

-

Space-separated tokens for parts every page of the file leaves out: text, anno, drop, controls and js. With js, PDFium also holds the file's form: its form data, XFDF and saving go through PDFium. See PDFFileElement.off. Multi-homed.

controls

A Boolean attribute: every page of the file gets viewer controls. controls=- turns inherited controls off. Multi-homed.

controlslist

Space-separated tokens for controls the file's pages leave out: parts of their bars, the bars (notoolbar) or the gestures (nogestures). See PDFElement.controlsList. Multi-homed.

event:prefix

type renames the file's events to pdf-file-load and so on. Multi-homed.

ium

A Boolean attribute: the file's pages draw with PDFium by default. ium=- turns the script's off for this file. See PDFFileElement.ium. Multi-homed.

max:image-size

A number of pixels (width × height): larger images are not drawn. The default, -1, draws every image.

password

The password of an encrypted PDF.

placeholder:aspect-ratio

The box the file's pages keep while the PDF is on the way. See PDFElement.placeholder. Multi-homed.

signatures

A Boolean attribute: every page of the file shows the cards of its signatures. Multi-homed.

src

The URL of the PDF: absolute, relative, data: or blob:. A failed direct fetch is retried once through the built-in proxy.

toolbar

The edge of the bars of the file's pages. See PDFElement.toolbar. Multi-homed.

trust:src

The URL of a certificate file whose roots the file trusts for its signatures. See PDFFileElement.trust. Multi-homed.

trust:srcdoc

Certificates the file trusts, inline (PEM or base64). Multi-homed.

trust:stores

Space-separated names of root stores the file trusts: aatl, eutl, ms and moz. Multi-homed.

xfdf:src

The URL of an XFDF file of form data to apply after the PDF loads. See PDFFileElement.XFDF.

Events

Listen to these events with addEventListener(). They bubble and are composed; page events bubble through their file too, so check event.target.

error

The PDF or its XFDF failed to load.

load

The PDF has loaded.

verify

The signatures have been checked.

Usage notes

Files and pages

A file draws nothing: it is laid out as if it were not there (display: contents), so pages nested in it sit in its parent's layout. Pages elsewhere name it with of. Changing the file (its src, data or password) updates every page.

Opening, saving and dropping

open(), save() and their siblings use the File System Access API where the browser has it, and an <input type=file> and downloads elsewhere. Every page is a drop target: drop a PDF, its XFDF, both, or a link onto it (unless -=drop). See Saving and exporting.

Signatures

A signed file verifies its signatures by itself, in the browser, and exposes the worst result as signed and :state(). Nothing is trusted by default: give it trust anchors with trust:*. See Verifying signatures.

Examples

Loading from a URL

HTML

<pdf-file id=f src=//new.webpdf.pro/forms.pdf></pdf-file>
<pdf-page of=f scale=0.5></pdf-page>

Result

Saving to the system

In the page itself, Ctrl S does the same.

const file = document.querySelector("pdf-file");
await file.save();      // the PDF, with its form edits
await file.XFDF.save(); // only the form data

Loading from the system

const file = document.querySelector("pdf-file");
await file.open();      // a PDF (and optionally its XFDF)
await file.XFDF.open(); // form data only

Loading from raw data

const file = document.querySelector("pdf-file");
const pdf = await (await fetch("form.pdf")).arrayBuffer();
const xfdf = await (await fetch("form.xfdf")).text();
await file.load(pdf);
await file.XFDF.load(xfdf);

Verifying signatures

HTML

<pdf-file id=s src=//new.webpdf.pro/signed.pdf trust:src=//new.webpdf.pro/demo-root.pem signatures></pdf-file>
<pdf-page of=s scale=0.6></pdf-page>

JavaScript

const rows = await document.querySelector("#s").verify();
console.log(rows.map((row) => row.status)); // ["verified", "verified"]

Result

Technical summary

Specifications

Not part of any specification. <pdf-file> and <pdf-page> are autonomous custom elements defined by WebPDF.pro. It implements:

Browser compatibility

See also

• <pdf-page>
• PDFFileElement
• Using WebPDF
• Saving and exporting
• Verifying signatures