{
const browser = await newBrowser(wsUrl);
try {
const page = await browser.newPage();
try {
await page.goto("https://pptr.dev/");
const pdfData = await page.pdf();
const dataUrl = `data:application/pdf;base64,${btoa(pdfData)}`;
return await pdfView(dataUrl);
} finally {
await page.close();
}
} finally {
await browser.close();
}
}
import { pdfView } from "@saneef/pdf-view"
{
// Launch the browser and open a new blank page
const browser = await newBrowser(wsUrl);
try {
const page = await browser.newPage();
// Navigate the page to a URL
await page.goto("https://pptr.dev");
// Set screen size
await page.setViewport({ width: 1080, height: 1024 });
await Promises.delay(3000);
const screenshot = await makeScreenshot(page);
return htl.html`<div>
<div class="screenshots">
${screenshot}
</div>
</div>`;
} finally {
await browser.close();
}
async function makeScreenshot(page) {
const imgUrl = await page.screenshot({
type: "png",
encoding: "base64",
fullPage: true
});
return htl.html`<img src="data:image/png;base64,${imgUrl}" />`;
}
}
async function newBrowser(wsUrl) {
const transport = await BrowserWebSocketTransport.create(wsUrl);
const browser = await connectToCdpBrowser({
transport
});
return browser;
}
import { toc } from "@nebrius/indented-toc"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
