Hey everyone. Is there a library that can convert ...

# compose-web

[Angga Ardinata]

Hey everyone.
Is there a library that can convert composable web/html/div container into pdf but also including all of its styling?

[Frank Bouwens]

It might not be the solution you’re looking for, but let me tell you about it anyway 😛

[Frank Bouwens]

A browser has a print-function. This print function can print the page to an actual printer. Or “print to pdf”.

[Frank Bouwens]

https://wkhtmltopdf.org/

wkhtmltopdf does this trick headless, and can be done on the server-side. Just feed it HTML, and it will generate a PDF, using the “print-to-pdf” function, as present in WebKit.

[Frank Bouwens]

wkhtmltopdf is uses an old version of WebKit, and may not support all of the latest and greatest CSS3, SVG, JavaScript features.

A solution to this, would be to use an up-to-date version of Chrome;
And control it somehow. That’s where puppeteer comes in:
https://github.com/puppeteer/puppeteer
It can fully control the Chrome browser, and therefor also use the print-to-pdf function.

Here’s a PHP library that does exactly that:
https://github.com/spiritix/php-chrome-html2pdf

[Skaldebane]

@Frank Bouwens That wouldn't work with Compose Web at all, since it draws everything in a canvas, with no HTML semantics yet (at least on Firefox, the page is blank, it doesn't even show the canvas contents).

And even if it works, it'll basically be an image, nullifying the benefits of having a PDF.

[Skaldebane]

The best way is to either:
1. If you want it to be a PDF (e.g. multiple pages, etc..) you'll want to capture images out of your Composables and use some JS PDF library to construct a PDF file out of them. However, it's basically gonna be images inside of a PDF.
2. Just capture an image and export that directly.

[Skaldebane]

Now, as for how to get capture an image out of a @Composable in Compose/Web, I have no clue at all. It would be great if there's a headless way to do so (without needing to add any HTML elements to the DOM / modifying the actual UI of the app), but I'm not sure.

On Compose/Desktop, there's ImageComposeScene which allows rendering a Composable out into an image (which can then be encoded as any of the well-known images types (.png /`.jpeg`)). This works well in headless mode so it can be run on a server!

EDIT: https://kotlinlang.slack.com/archives/C01F2HV7868/p1722273132883949?thread_ts=1722272483.625119&cid=C01F2HV7868
You can extract an image out of your Composables using SingleLayerComposeScene (code linked above), then pass it to a JS PDF library.

[Skaldebane]

If that sounds too complicated/inconvenient, that's because it is 😅

The best and easiest way to generate a PDF is from a classic HTML+CSS template, and the resulting PDF will be accessible, text will be selectable, and probably smaller in size (since it's not just an image anymore).

[Angga Ardinata]

i can actually generate the fully stylized html string, however didnt find any good html to pdf library 😞

[Skaldebane]

What about this one here: https://github.com/bpampuch/pdfmake

[Skaldebane]

Works on both client and server JS

[Angga Ardinata]

will try that

[Angga Ardinata]

but another question
in kotlin/js or kotlin web, when i inspect and go to debugger, all my kotlin files is exposed inside webpack folder, is this common ?

sorry im newb in webdevelopment

[Skaldebane]

have you tried to make a production build?
in development mode the files may be there to ease debugging

[Angga Ardinata]

Im using kobweb framework, how to build production target ?

[Angga Ardinata]

I only familiar with android 😁

[Angga Ardinata]

Even in kobweb's site itself i still can see the kotlin files

[Skaldebane]

huh, that's really interesting

[Angga Ardinata]

I guess every website built by kotlin js will always includes the kotlin files itself

[Skaldebane]

i'm not sure that would be always desirable though
because it's literally the entire source-code there as-is

[Skaldebane]

maybe try asking about this in #javascript

[Angga Ardinata]

Thats why i think thats so strange that we expose entire source code

[Chrimaeon]

The keyword you are looking is sourcemaps.
https://webpack.js.org/configuration/devtool/

You should be able to configure this via the Gradle plugin or webpack.config.d