Multi-homed attributes

These attributes work on the script, every pdf-file and every pdf-page: set one once for the whole document, then override it where a file or a page needs something else.

<script src=//new.webpdf.pro/.js type=module controls></script>
<pdf-file id=f src=a.pdf></pdf-file>
<pdf-page of=f           ></pdf-page> <!-- controls: from the script -->
<pdf-page of=f controls=-></pdf-page> <!-- none on this page   -->
<pdf-page of=f -=controls></pdf-page> <!-- none: an off-list token -->

Properties give the effective value: p.controls is true on a page that inherits it, p.controls = false writes controls=- and p.controls = null inherits again.

Examples

Load from URL ▶️ try live

<pdf-file id=f src=//pdf.ist/form.pdf></pdf-file>
<pdf-page of=f></pdf-page>

or

<pdf-file id=f></pdf-file>

try {  await f.load('//pdf.ist/form.pdf'); }
catch (e /* : PDFLoadError */) { /*E*/ } /*S*/

or

f.addEventListener('error', e => { /*E*/ }, { once: true });
f.addEventListener('load',  e => { /*S*/ }, { once: true });
f.src = '//pdf.ist/form.pdf';

Save to System ▶️ try live

await f     .save(); // below export options
await f.XFDF.save(); // would apply here too

await f     .export();                                // : File
await f     .export({ name: 'a.pdf' });               // = File{name: 'a.pdf', …}
await f     .export(File);                            // : File
await f     .export(Blob);                            // : Blob
await f     .export({ type: Blob, noEdit: true });    // : Blob (without edits after load)

await f.XFDF.export();                                // : XMLDocument
await f.XFDF.export({ indent: false });               // : XMLDocument
await f.XFDF.export(XMLDocument);                     // : XMLDocument (also supports: File | Blob)
await f.XFDF.export(String);                          // : String      (via XMLDocument.toString())
await f.XFDF.export({ type: String, indent: false }); // : String

Load from System ▶️ try live

await f     .open();
await f.XFDF.open();

Load from Raw Data ▶️ try live

const  pdfData = await fetch('//pdf.ist/form.pdf' ).then(f => f.arrayBuffer());
const xfdfData = await fetch('//pdf.ist/form.xfdf').then(f => f.text());
await f     .load( pdfData);
await f.XFDF.load(xfdfData);

Load from File or ⋯FileHandles ▶️ try live

await f     .load(pdf       /* : File */); // Distinguished by
await f.XFDF.load(     xfdf /* : File */); // File.name extension.
await f     .load(pdf, xfdf);              // Load both at once.

Load from System by Drag & Drop ▶️ try live

Every pdf-page is a drop target for its file: drop a .pdf, an .xfdf, both, or a link on the page above.

<pdf-page of=f       ></pdf-page> <!-- drop here -->
<pdf-page of=f -=drop></pdf-page> <!-- not here  -->

🆕 Verify Signatures ▶️ try live

<pdf-file id=s src=signed.pdf trust:src=roots.pem signatures></pdf-file>
<pdf-page of=s></pdf-page>

const rows = await s.verify(); // [{ name, status, code, signerName, time, revocation, … }]

Properties

reflected: setting a property writes its attribute, so changes from code and controls show up in the markup.

<pdf-file id=f src=⋯ password=⋯ ium max:image-size=⋯ -=⋯></pdf-file>

             f.src

Properties (XFDF)

<pdf-file id=f xfdf:src=⋯></pdf-file>

             f.XFDF.src

Properties (Signatures)

<pdf-file id=s src=⋯ signatures trust:stores=⋯ trust:src=⋯ trust:srcdoc=⋯></pdf-file>

                              s.trust.stores.add('eutl');     // + the EU trusted lists
                              s.trust.stores.add('-moz');     // - the <script>'s Mozilla roots

Methods (IO)

All work both on the PDF file and its annotation format.

await f.     open(); // 📕 PDF file
await f.XFDF.open(); // ✏️ annotation

Methods (Signatures)

const rows = await s.verify();                // cached: runs again when trust:* changes
const rows = await s.verify({ force: true }); // or when forced

Events

const                         h = e => console.warn(e.type, e.detail);
f.   addEventListener('load', h);
f.removeEventListener('load', h);

Examples

<pdf-file id=f src=//pdf.ist/web.pdf></pdf-file>

Embed First Page ▶️ try live

<pdf-page of=f></pdf-page>

Embed Last and First Pages ▶️ try live

<pdf-page of=f no=-1 controls scale=.2></pdf-page>
<pdf-page of=f no=+1 controls scale=.2></pdf-page>

Responsive Transparent Pages ▶️ try live

Pages are responsive to context. Set background-color (or --pdf-page-background-color) for transparency.

<div checkerboard    style=display:flex re-size=h>
  <pdf-page of=f svg style=background-color:transparent></pdf-page>
  <pdf-page of=f     style=background-color:transparent></pdf-page>
</div>

[checkerboard] { background: repeating-conic-gradient(oklch(88% 0 0) 0 25%, transparent 0 50%) 0 0 / 1em 1em; }

[re-size]    { display: flex; overflow: hidden; max-width: 100%; outline: 1px dashed; }
[re-size]    { resize:       both; }
[re-size=v]  { resize:   vertical; }
[re-size=h]  { resize: horizontal; }

Scale as Resolution ▶️ try live

With extrinsic sizing, scale can be used just for resolution.

<div style=display:flex;height:20rem;max-width:min-content re-size=v>
  <pdf-page of=f controls scale=.1 style=height:100%;max-height:none></pdf-page>
</div>
<div style=display:flex;width:20rem;max-width:min-content  re-size=h>
  <pdf-page of=f controls scale=.1 style=width:100%;max-width:none></pdf-page>
</div>

🆕 Lazy Pages ▶️ try live

A lazy page loads its size at once and renders when it comes within one viewport of the visible area (or is found, focused or printed). A lazy PDFium page also waits until then to load PDFium.

<pdf-page of=f no=1 loading=lazy></pdf-page>
<pdf-page of=f no=2 loading=lazy></pdf-page>
⋯

🆕 Fullscreen ▶️ try live

Focus a page with controls (like the two above) and press F; Esc leaves.

<pdf-page of=f id=p controls></pdf-page>

await p.toggleFullscreen(); // true | false

🆕 Signature Cards ▶️ try live

<pdf-file id=s src=signed.pdf trust:src=roots.pem signatures></pdf-file>
<pdf-page of=s             ></pdf-page> <!-- compact cards; click one for the full card -->
<pdf-page of=s signatures=-></pdf-page> <!-- hotspots only -->

Properties

These determine the content and the intrinsic size for layout.

<pdf-page of=f id=p no=⋯ scale=⋯ rotation=⋯ offset:x=⋯ offset:y=⋯></pdf-page>

                  p.no++;

Properties (Render)

These determine how/which layers are rendered.

<pdf-page of=f id=p canvas=⋯ svg -="text anno" loading=⋯ watermark=⋯></pdf-page>

                               p.off.add('text');

Properties (Controls)

These make a single pdf-page instance as powerful as a viewer.

<pdf-page of=f id=p controls -=drop signatures=⋯></pdf-page>

Methods (IO)

await p.image.export();

Events

const                         h = e => console.warn(e.type, e.detail);
p.   addEventListener('load', h);
p.removeEventListener('load', h);

CSS (Parts)

The layers, links, fields and signature cards of a page are parts.

pdf-page::part(link)      { background: oklch(62% .24 27 / .1); }
pdf-page::part(\<input\>) { background: oklch(96% .04 95); }
pdf-page::part(sig-card)  { font-size: .9rem; }

CSS (States)

Custom states: the elements' attributes stay as written.

pdf-page:state(pending)           { opacity: .5; }
pdf-page:state(drop-target)       { outline: 2px dashed; }
body:has(pdf-file:state(invalid)) { background: oklch(95% .03 27); }

CSS (Custom Properties)

pdf-page { --pdf-page-background-color: transparent; --pdf-page-focus-outline: 2px solid; }