Render

Anfra.render() draws your page as the reader sees it now, or one block or container of it, and has the host save it as a PNG or PDF.

Anfra.render() comes from the render plugin. Before you add a picture button to your page, note that the host may already offer one: anfra serve saves a PNG or PDF of the whole page, or of any block or container, from its toolbar and Inspect panel, with nothing written in your page. Add your own button only when readers need it in the page itself, and offer it only when the plugin is installed and the reader may export data:

if (Anfra.plugins.has('render') && Anfra.user.permissions.canExportData) {
  pictureButton.hidden = false
}

Saving a pictureCopy Anchor Link

await Anfra.render({ block: 'trend', format: 'png' })     // a block, by its data-anfra-block id
await Anfra.render({ container: 'kpis', format: 'pdf' })  // a container, by its data-anfra-container id
await Anfra.render({ format: 'pdf' })                     // the whole page

Blocks and containers are the parts you mark in your HTML. See Page structure.

Anfra.render() draws at once, from what is on the page. If results may be stale, await app.execute() first.

The promise resolves once the file is saved, with { filename, format, width, height, blob, omitted }. omitted lists, by URL, the images that had to be left blank. When it isn't empty, tell the reader.

A PDF is one page holding the picture, not a printed document, so its text isn't selectable.

Making the page render wellCopy Anchor Link

A picture shows charts drawn on a canvas or in SVG, along with your HTML, CSS, and any images and fonts served with CORS headers. A few things need care:

• Animations. A chart caught mid-animation is drawn that way. Turn entry animations off in a page that may be rendered, such as ECharts' animation: false.
• WebGL. A WebGL chart is blank unless it sets preserveDrawingBuffer: true.
• Images and fonts without CORS. An image whose server sends no CORS headers is left blank, keeps its space, and is listed in omitted. A web font without CORS falls back to another font. Serve both from servers that send CORS headers, such as jsDelivr or Google Fonts.
• Frames. Nothing inside an iframe of your page's own is drawn.

Mark anything that shouldn't be in a picture, such as a download button or a spinner, with data-anfra-render="skip". It is left out together with everything it holds.

ErrorsCopy Anchor Link

Anfra.render() rejects with a ValidationError naming the part when no element is marked with that id, when you pass both block and container, when format or pixelRatio is invalid, or when the picture is too large for a canvas.

RelatedCopy Anchor Link

• Plugins: checking that the host installed render.
• Page structure: marking the blocks and containers you can render.