PDFPageImageLayer: export() method

Syntax

export()
export(type)
export(options)
export(type, options)

Parameters

type Optional

What to return: Blob (the default), URL (a data: URL) or ClipboardItem, ready for navigator.clipboard.write(). A ClipboardItem holds only types the clipboard accepts: browsers take PNG images (Chromium also SVG), so other formats are copied as PNG, and an svg page as SVG and PNG where SVG is accepted.

options Optional

An object with these properties:

type Optional

As the type parameter.

format Optional

The image format: "png", "webp", "jpeg" (or "jpg"), "avif" or "svg", or a MIME type such as "image/png". The default is "svg" for an svg page and "png" otherwise.

quality Optional

A number from 0 to 1 for the lossy formats. The default is 1.

Return value

A Promise that resolves to a Blob, a URL or a ClipboardItem, as type asks.

Exceptions

TypeError

Thrown if type is not Blob, URL or ClipboardItem.

PDFExportError

Rejects with this error, exported by the WebPDF module, for an unknown format, or for "svg" on a page drawn on a canvas.

Usage notes

• The image is the page alone: transparent, without the page's background-color, the text and annotation layers, the signature cards, the controls or the evaluation watermark. JPEG has no transparency, so a JPEG is drawn on white paper.
• Only svg pages (see PDFPageElement.svg) export "svg". Raster formats from an svg page rasterize its SVG first. SVG exports embed their fonts only with fonts on the <script>.
• When the browser cannot encode a format (AVIF in some browsers), it returns PNG instead: check the Blob's type.
• On a page with controls, Ctrl C copies export(ClipboardItem) and Ctrl D copies export(URL) as text. Both write to the clipboard within the key press, as Safari requires.

Examples

Exporting in different types and formats

const page = document.querySelector("pdf-page");
await page.image.export();                                 // Blob (image/png)
await page.image.export(URL);                              // URL (data:image/png;base64,…)
await page.image.export({ format: "webp", quality: 0.8 }); // Blob (image/webp)
await page.image.export(Blob, { format: "jpeg" });         // Blob (image/jpeg)

Copying a page to the clipboard

const page = document.querySelector("pdf-page");
await navigator.clipboard.write([await page.image.export(ClipboardItem)]);

Specifications

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

Browser compatibility

See also

• PDFPageImageLayer.metrics
• PDFPageElement.image
• Saving and exporting