Screenshots, PDFs and Rendering

Screenshots, PDFs, rendered HTML, and the bx:playwrightRender component.

Screenshots, PDFs and Rendering

Capture pages as images or PDFs, and render your own HTML with a real browser (modern CSS, web fonts, JavaScript). PDFs need Chromium, the default browser; the print profile is a good fit.

One-shot helpers

No page to manage: each call opens a browser, captures and closes it.

pw = playwright()
pw.screenshot( "https://boxlang.io", "home.png", { fullPage : true } )
pw.pdf( "https://boxlang.io", "home.pdf", { format : "A4" } )
html  = pw.content( "https://boxlang.io" )                 // the HTML after JavaScript ran
bytes = pw.render( "<h1>Hi</h1>", { type : "png" } )       // no path returns the bytes

screenshot(), pdf() and content() also accept waitUntil (load, domcontentloaded, networkidle).

From a page

page.screenshot( "page.png", { fullPage : true } )
page.locator( "@chart" ).screenshot( "chart.png" )
page.pdf( "page.pdf", { format : "Letter", landscape : true, margin : { top : "1cm" } } )

Both return the path, or the bytes when you pass no path. Screenshot options: fullPage, type, quality, clip, omitBackground, animations, mask (selectors to paint over). PDF options are listed below.

bx:playwrightRender

The component renders its body to PDF, PNG, JPEG or WebP. In a template:

<bx:playwrightRender type="pdf" path="invoice.pdf" format="A4" margin="1cm">
	<bx:output>
		<h1>Invoice #invoice.id#</h1>
	</bx:output>
</bx:playwrightRender>

In script:

bx:playwrightRender type="png" variable="socialCard" viewport="1200x630" {
	writeOutput( socialCardHtml )
}

render() takes the same options as a struct, for example pw.render( html, { type : "pdf", path : "invoice.pdf", margin : { top : "1cm" } } ).

Defaults come from the render setting: { format : "A4", printBackground : true, waitUntil : "networkidle" }.