Save HTML to PDF file using html2canvas + jsPDF

Hello.

Since I discovered this community I have found over and over solutions for my specific projects.
I want to say again that I am thankful to so many members that offer support and solutions. Thank you.

I let you know this in the beginning of this post because always as I am asking for support I have no idea about the limits of the request, hoping that I am not asking for nothing that it is hard or request to much from your resources.

//

Context:

I need a solution to save PDF files that are user generated.
To achieve this, I finished now with a solution not related to Tumult Hype, a solution that uses PhantomJS on a VPS server. Because of my limitations related to coding, I have this done with a support of a friend that knows PHP, but limited with JS.
Anyway, PhantomJS has a limitation: the PDF files are screenshots and in the final result the text it is just a picture …

I have searched the forum and I found it this post ( Save HTML file as PDF) but with no final answer, and also the solution from this post ( Is there a way to render a scene (or part of a scene) as an image file for sharing?), that is uses html2canvas and it is amazing.

What I need:

Searching the web I have found that may be a solution to export files using html2canvas and jsPDF to save not only images, but also PDF files.

There are a lot of posts online related to this subject but in this post Javascript converts HTML to pdf for download (html 2 canvas and jsPDF) link on demo 2 and demo 4, the exported PDF has the text not as a screenshot, but as a selectable text.

Since my level of working with JS functions it is only by looking inside of the example that I found on this forum I would like to ask you to offer me support by combining the html2canvas and jsPDF in this solution, in order to export PDF ideally with selectable text or if it is to much work, than PDF only as a screenshot, also for the text.

Thank you.

Ionut

html2canvas does as the name implies - takes an HTML DOM tree and converts to a canvas element. The problem is that canvas elements are bitmaps, so it will lose all the text information. Therefore the next step of using jsPDF is only being fed an image.

The demo 2 and demo 4 that you reference have explicit code that create text elements in the PDF.

Short of making your own system that walks the DOM and feeds everything to jsPDF (which would pretty much be a HTML browser!), I would look at running command line tools on your server that can do the conversion. There’s a lot out there that can do HTML to PDF directly. I haven’t used any myself but pandoc and wkhtmltopdf look pretty promising:

Thank you for your answer, @jonathan!
Having no right coding knowledge I took that sample as I wanted to be.

It is not the case for further hard work.

I wanted a solution that may be used with Tumult Hype so I can control the design and understand the flow.

Thank you very much for your support.
Best Regards!
Ionut

Thank you, again @jonathan !

I am coming back with some information just to be sure that I am understanding right.

  1. HTML2canvas will always generate only bitmaps.

  2. In order to use PDFjs it is necessary to build a browser like solution, based on a server-side function.

  3. It may be possible to obtain a PDF file that create text elements based on PDF.js from Mozilla that may work at the level of the browser not server and may be integrated (created) inside (via) T. Hype?
    I am asking this in order to know if it possible and eventually search / ask for paid support.

Thank you,
Ionut

True (well, it makes a canvas element! but canvas is bitmap-backed, and what the examples were doing was then extracting that bitmap to feed into a PDF file).

My points above were to avoid using PDFjs; if you use a server-side solution there is no need for it.

PDFjs basically takes javascript commands and constructs a PDF with them. In fact, the PDF format itself is just a list of drawing commands. So if you want to use it, you’d need to supply the commands from somewhere (which is basically making a HTML->PDF renderer!). Therefore there’s no point to use this tool, as the other ones I mentioned directly take HTML and output PDF.

I’m not quite sure what you’re asking here, but PDF.js is basically just PDF viewer made in javascript to bypass issues that have historically happened across different browsers to show PDFs. You can probably integrate this in Hype if you wanted.

Thank you very much for all information.

What I was trying to say about PDFjs from Mozilla it is if it may be used for my need that is to generated PDF documents from a Scene with text, that was created with Hype.

I understand that it is possible.

Thank you! :pray:
Ionut

I think what you’d need to do is to in JavaScript capture the DOM or a portion on the DOM and send it to a server that has a process which can run pandoc/wkhtmltopdf, and then return the resulting PDF. If you wanted you could then display it via PDFjs, though this seems redundant since you are already displaying the HTML part :slight_smile:.

Oh, uh.
Now I understand that PDFjs it is just the viewer and not a generator.

Thank you!
Thank you very much!

jsPDF is a generator and PDF.js is a viewer. That’s not confusing at all. </sarcasm>

1 Like

:grinning: