Generate a pdf file
Different ways to generate a pdf file
Option 1: Using the browsers print feature
Use window.print()
to print the current page.
To hide certain elements from the print view you can use @media print
in your css.
<button onclick="window.print()">Print</button>
<p class="no-print">I'm visible on the website but hidden on the printed page.</p>
<p class="print">I'm invisible on the website but visible on the printed page.</p>
<style>
.print {
display: none;
}
@media print {
.no-print {
display: none;
}
.print {
display: block;
}
}
</style>
This approach does require the user to select the PDF option in the print dialog.
Option 2: Using a PDF library
There are many PDF libraries like PDF-LIB that allow you to easily generate a pdf file. Here is a basic example of using it with a sveltekit +server.ts
endpoint:
import { PDFDocument } from 'pdf-lib';
export async function GET() {
const pdfDoc = await PDFDocument.create();
const page = pdfDoc.addPage();
page.drawText('Pdf content', {
x: 50,
y: 700,
size: 20
});
const pdfBytes = await pdfDoc.save();
return new Response(pdfBytes, {
headers: {
'Content-Type': 'application/pdf'
'Content-Disposition': 'attachment; filename="example.pdf"' // use "inline" instead of "attachment" to display the pdf in the browser
}
});
}
Option 3: Using a headless browser
You can use a headless browser like Playwright to generate a pdf file.
Here is a basic example of using it with a sveltekit +server.ts
endpoint:
import { chromium } from 'playwright';
export async function GET() {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://playwright.dev/');
await page.emulateMedia({ media: 'print' });
const pdf = await page.pdf();
await browser.close();
return new Response(pdf, {
headers: {
'Content-Type': 'application/pdf',
'Content-Disposition': 'attachment; filename="page-print.pdf"' // use 'inline' instead of 'attachment' to display the PDF in the browser
}
});
}