TLDR; Does anyone know if there’s an initiative to use the pdf rendering engines built into most browsers and used while printing a web page in more flexible ways? Ideally from javascript being able to get the pdf as a File.

I’ve been looking into download as pdf functionality we implemented at work. It’s for a single project, relatively small, so we implemented it with html2pdf.js. There seems to be no better way than rendering the webpage as canvas and saving as an image inside PDF. Although I’m thankful that the project exists, with the lack of text selection, poor image quality and/or large file sizes, it feels bad serving it to the customer. Then I started to look into the printed version and I loved it. Learned some new stuff about css, being able to break a page before a specific element. Tables automatically repeat their header across a page break. I can also save this as pdf, better quality, 40x reduction in file size, yay! However, web api to start this is print(), no arguments, no alternatives. Putting this behind a “Download” buttons seems confusing for the end user. I’m amazed we can’t use this built in pdf rendering engine in more flexible ways. (See TLDR for question)

3 points

At a prior company I worked at, they had the requirement to allow pretty sophisticated and seamless “download report as pdf” functionality. So exactly what you’re asking about, more or less.

The solution they came to was to have the “Print to PDF” button call an endpoint that launched a headless chrome instance that printed the page, and to have a pile of print media css rules. It worked… Far better than it really should have.

permalink
report
reply
1 point

Yeah, I fear we might have to go for something like that in the long run as well. Feels bad when the browser is capable enough to handle it but is just missing the interfaces.

permalink
report
parent
reply

Web Development

!webdev@programming.dev

Create post

Welcome to the web development community! This is a place to post, discuss, get help about, etc. anything related to web development

What is web development?

Web development is the process of creating websites or web applications

Rules/Guidelines

  • Follow the programming.dev site rules
  • Keep content related to web development
  • If what you’re posting relates to one of the related communities, crosspost it into there to help them grow
  • If youre posting an article older than two years put the year it was made in brackets after the title

Related Communities

Wormhole

Some webdev blogs

Not sure what to post in here? Want some web development related things to read?

Heres a couple blogs that have web development related content

Credits

Icon base by Delapouite under CC BY 3.0 with modifications to add a gradient

Community stats

  • 6

    Monthly active users

  • 317

    Posts

  • 1.1K

    Comments