HTML to PDF Action - NodeJS & PHP [Open Source]

[sid]

Yo,

Presenting HTML to PDF custom module. This extension adds to the already great set of components Wappler provided by default. Its available for both PHP and NodeJS server models.

Add HTML to PDF step in server connect from File Management category, specify an output folder path & name along with your custom HTML and the module will create a PDF from that HTML and save it.
You can then use that PDF to send as attachment via email or just store the path in DB.

Almost all options are explained using help texts. Please make sure to read them.
Here is the full source and documentation:
NodeJS: https://gitlab.com/wappler-extensions/html-to-pdf-nodejs
PHP: https://gitlab.com/wappler-extensions/html-to-pdf-php

For NodeJS, you will have to install 1 package - Puppeteer.
This package has its own set of dependencies and might not work on a shared hosting server.

For PHP, you will have to install 1 package - mPDF using Composer.
This package is not as powerful as NodeJS’s puppeteer, ref here.

For details on how to integrate custom modules in your Wappler project, please refer the help doc here.

Feel free to reports bugs or improvements or feature requests. If you have any critical feedback we’d be happy to hear.

Thanks,
Team /#

[max_gb]

This is going to be very helpful, thanks!

[Mozzi]

I nominate you for an award @sid We know the team is so so busy with “requests” … and they do their best to get everything done… its a mammoth task…

Im sure everybody that wanted a HTML to PDF solution within Wappler is grateful for your contribution. Thank you.

I think there was like Pdf generator/export 54 votes. I will also post your link in there … if you dont mind…

[sid]

Thank you for the kind words.
Do let me know if you run into any issues with this module.

[webmaster]

Amazing work guys!!! Very useful

[transcoderm]

@sid do you have example of pdf produced by this extension and the html source?

[transcoderm]

@sid

For NodeJS, you will have to install 1 package - Puppeteer

And sorry for a noob question. Do I install it from terminal using NPM and that’s it or I must include the dependency into the public folder and then manually include the link from the main page.

[sid]

@transcoderm

have example of pdf produced by this extension and the html source?

If you clone the git, you will find both the things.

@transcoderm

Do I install it from terminal using NPM

Just installing from terminal should be enough.

[Mark72it]

Thanks Sid!

[Emiel]

Great tool @sid, thanks for this!

I would be very interested in a tool that works the other way around and converts pdf file content to html.
Could you help me along to develop a custom module for this? Thank you very much for your help in advance!

[salvuccicarlos]

How can I run the app on my mac? I’ve tried using node index.js on the directory after cloning but it doesn’t work

[sid]

There is no special setting required to run on Mac.
It should just run like every other Wappler project.

[salvuccicarlos]

Any idea about the error passed below? I’ve read something (https://stackoverflow.com/questions/66070860/puppeteer-error-error-while-loading-shared-libraries-libgobject-2-0-so-0) about Docker, but I can’t solve it. Any idea? (the git proyect I clone works correctly using docker)

Failed to launch the browser process!
/opt/node_app/node_modules/puppeteer/.local-chromium/linux-869685/chrome-linux/chrome: error while loading shared libraries: libgobject-2.0.so.0: cannot open shared object file: No such file or directory

TROUBLESHOOTING: https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md

[sid]

Like it says on the SO link, it was the positioning on apt-get that was the cause of issue.
You need to install some packages separately in docker to get puppeteer to run.
The docker.yml file is the one you need to setup I think to write those apt-get commands. Not sure though.

[salvuccicarlos]

After some research I founded a tutorial to make puppeteer work using docker at https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md#running-puppeteer-in-docker

Basically, I copied inside the dockerfile this code:

FROM node:12-slim

    # Install latest chrome dev package and fonts to support major charsets (Chinese, Japanese, Arabic, Hebrew, Thai and a few others)
    # Note: this installs the necessary libs to make the bundled version of Chromium that Puppeteer
    # installs, work.
    RUN apt-get update \
        && apt-get install -y wget gnupg \
        && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
        && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
        && apt-get update \
        && apt-get install -y google-chrome-stable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf libxss1 \
          --no-install-recommends \
        && rm -rf /var/lib/apt/lists/*

    # If running Docker >= 1.13.0 use docker run's --init arg to reap zombie processes, otherwise
    # uncomment the following lines to have `dumb-init` as PID 1
    # ADD https://github.com/Yelp/dumb-init/releases/download/v1.2.2/dumb-init_1.2.2_x86_64 /usr/local/bin/dumb-init
    # RUN chmod +x /usr/local/bin/dumb-init
    # ENTRYPOINT ["dumb-init", "--"]

    # Uncomment to skip the chromium download when installing puppeteer. If you do,
    # you'll need to launch puppeteer with:
    #     browser.launch({executablePath: 'google-chrome-stable'})
    # ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD true

    # Install puppeteer so it's available in the container.
    RUN npm i puppeteer \
        # Add user so we don't need --no-sandbox.
        # same layer as npm install to keep re-chowned files from using up several hundred MBs more space
        && groupadd -r pptruser && useradd -r -g pptruser -G audio,video pptruser \
        && mkdir -p /home/pptruser/Downloads \
        && chown -R pptruser:pptruser /home/pptruser \
        && chown -R pptruser:pptruser /node_modules

    # Run everything after as non-privileged user.
    USER pptruser

    CMD ["google-chrome-stable"]

But after deploying and starting Docker, I’m getting this new error I can’t solve:

Failed to move to new namespace: PID namespaces supported, Network namespace supported, but failed: errno = Operation not permitted

Any ideas?

[sid]

Can you share the complete dockerfile? I am a newbie with this stuff. Can try to help.

Found this on Google: https://github.com/jessfraz/dockerfiles/issues/350

[salvuccicarlos]

I’m quite lost. My complete docker file is the original that Wappler creates automatically when you start a new proyect with those lines I previously copied (I’m not with my Mac right now).

After 4 hours of research, I gave up. I really don’t know how to implement the chromium and puppeteer service on the same image that runs Wappler’s web app. Maybe I should create a new image with those two services? There’s documentation and proyects to clone where you can start a Docker machine runing those services. But from what I understand, that won’t work because it would be separated from the web app, right?

[sid]

I will try to deploy on my test server and see if i have any luck with it.

[salvuccicarlos]

Hello once again. Now with my server working with Puppeteer I wanted to know if there is any way I could use wappler’s frameworks for styling the PDF or I should do it manually?

I wanted to use these frameworks but the action crashes when executing it:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
  <script src="../js/jquery-3.5.1.slim.min.js"></script>
  <link rel="stylesheet" href="../dmxFramework7_icons/css/framework7-icons.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <script src="../dmxAppConnect/dmxRouting/dmxRouting.js" defer=""></script>
  <link rel="stylesheet" href="../bootstrap/5/simplex/bootstrap.min.css" />

[sid]

The paths all need to be absolute.
So for jQuery, you cannot use .. /js/
Replace that with a CDN URL. Or even a full URL from your own deployed project.