Example on Rendering PDFs using other providers like jsPDF

[s-hamdananwar]

Hi Team, really excited to use this product! I was wondering if you guys have any examples on using other providers like jsPDF to render the HTML into PDF without using OneDocLabs. Thanks!

[AugusteLef]

Hey!

Just a heads-up that certain components of the react-print-pdf library might not render correctly in PDF with alternative solutions like Puppeteer for example—this especially applies to footers, headers, tailwind components, and other complex elements. That's why we recommend using Onedoc, which now offers 500 free documents per month, covering most personal use cases.

If you prefer a different renderer, I don't have any code to share right now but will check on Discord and update you ASAP. Meanwhile, if anyone has a successful example, please feel free to share it here and we could include it in the react-print-pdf documentation (which you can also contribute to directly on the repo)!

[nktnet1]

Hi @AugusteLef,

Do you have any updates on this? Thank you ~

[Titou325]

Hi @nktnet1,

There is no plan to support other renderers as Fileforge is sunsetting, however we welcome contributions.

Components such as Tailwind, Markdown, LaTeX, CSS and Font will work with other HTML to PDF renderers usually. Layout elements should work with PrinceXML and DocRaptor, with slight modifications.

Thanks,
Titouan

[nktnet1]

A basic example of returning a PDF from compiled HTML (using playwright):

import playwright from 'playwright';

export const generatePDF = async (html: string) => {
  const browser = await playwright.chromium.launch();
  const page = await browser.newPage();
  await page.setContent(html);
  const res = await page.pdf({
    // format: 'A4',
    // scale: 1,
    // printBackground: true,
    // margin: {
    //   top: '0px',
    //   bottom: '0px',
    //   left: '0px',
    //   right: '0px',
    // },
    // pageRanges: '1',
  });
  await browser.close();
  return res;
};

and, for example, in a NextJS API route:

import { compile } from '@fileforge/react-print';

export const GET = async (req) => {

  const html = await compile(YourDocumentComponent({ yourProps }));
  const pdf = await generatePDF(html);

  return new Response(pdf, {
    headers: {
      'Content-Type': 'application/pdf',
    },
  });
};

Note

• you won't be able to deploy playwright to Vercel out of the box
• you may want to keep the playwright chromium browser opened and re-use it, instead of launching a new one each time