PDF Output

[vc_row][vc_column][vc_column_text]

Issue

Exporting your output to PDF is difficult when you can’t conform to E2PDF (or you don’t want to buy it).  Also, you’ve likely found plugins such as DKPDF to be sorely lacking in both updates and support.

Use Case

Using a view, I created a table that users need to print.

Solution

Use html2canvas (which, in turn, uses jspdf) to identify which part of your page you want to render as an image which is then saved as a PDF.

Credits to

N/A

Non-Code Changes

You’ll need to include the following two JS “libraries”, either on a specific page or for your entire site.
https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js

https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.7/dist/html2canvas.min.js

Caveats

Since each CSS attribute has to be handled by jsPDF individually, some are still not supported.

If there are elements inside the “print area” that you don’t want to send to the pdf, add the following attribute to its element definition in the html: data-html2canvas-ignore=”true”.  e.g., I didn’t want the repeater Add/Remove icons showing up, so I added some jQuery code to add that attribute to all the elements with the class frm_repeat_buttons – $(‘.frm_repeat_buttons’).attr(‘data-html2canvas-ignore’, ‘true’);

I never got to the bottom of it, however, in some circumstances, you will get blank pages at the beginning, end or both, so you might have to add code to delete them, e.g., pdf.deletePage(pdf.internal.getNumberOfPages()); will delete the last page of your output.

Code

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_raw_html]JTNDcHJlJTNFJTBBJTBBJTI0JTI4JTIyJTIzcGRmZXhwb3J0aWNvbiUyMiUyOS5jbGljayUyOGZ1bmN0aW9uJTIwJTI4JTI5JTIwJTdCJTBBJTA5JTBBJTA5dmFyJTIwZWxlbWVudCUyMCUzRCUyMCUyNCUyOCUyNyUyM3NlY3Rpb24tMi0zMDYlMjclMjklM0IlMjAlMkYlMkElMjBzZWN0aW9uLTItMzA2JTIwaXMlMjB3aGF0ZXZlciUyMHRoZSUyMHRvcCUyMG9mJTIwdGhlJTIwZWxlbWVudCUyMHlvdSUyMHdhbnQlMjB0byUyMHByaW50JTIwJTJBJTJGJTBBJTA5aHRtbDJjYW52YXMlMjhlbGVtZW50LmdldCUyODAlMjklMjkudGhlbiUyOCUyMGZ1bmN0aW9uJTIwJTI4Y2FudmFzJTI5JTIwJTdCJTBBJTA5JTA5dmFyJTIwaW1nRGF0YSUyMCUzRCUyMGNhbnZhcy50b0RhdGFVUkwlMjglMjdpbWFnZSUyRnBuZyUyNyUyOSUzQiUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUwQSUwOSUwOWNvbnN0JTIwcGRmJTIwJTNEJTIwbmV3JTIwanNQREYlMjglMjdwJTI3JTJDJTIwJTI3bW0lMjclMjklM0IlMEElMDklMDl2YXIlMjBwYWdlV2lkdGglMjAlM0QlMjBwZGYuaW50ZXJuYWwucGFnZVNpemUuZ2V0V2lkdGglMjglMjklM0IlMEElMDklMDl2YXIlMjBwYWdlSGVpZ2h0JTIwJTNEJTIwcGRmLmludGVybmFsLnBhZ2VTaXplLmdldEhlaWdodCUyOCUyOSUzQiUwQSUwQSUwOSUwOXZhciUyMGltZ2hlaWdodCUyMCUzRCUyMGVsZW1lbnQuaGVpZ2h0JTI4JTI5JTIwJTJBJTIwMjUuNCUyMCUyRiUyMDk2JTNCJTIwJTJGJTJGcHglMjB0byUyMG1tJTBBJTA5JTA5dmFyJTIwcGFnZWNvdW50JTIwJTNEJTIwTWF0aC5jZWlsJTI4aW1naGVpZ2h0JTIwJTJGJTIwcGFnZUhlaWdodCUyOSUzQiUwQSUwQSUwOSUwOSUyRiUyQSUyMGFkZCUyMGluaXRpYWwlMjBwYWdlJTJDJTIwdGhvdWdoJTIwdGhlcmUlMjdzJTIwbm8lMjBuZWVkJTIwdG8lMjBjYWxsJTBBJTA5JTA5cGRmLmFkZFBhZ2UlMjglMjklMjBiZWNhdXNlJTIwdGhlJTIwY29uc3RydWN0b3IlMjBhZGRzJTIwYSUyMHBhZ2UlMjAlMkElMkYlMEElMDklMDlwZGYuYWRkSW1hZ2UlMjhpbWdEYXRhJTJDJTIwJTI3UE5HJTI3JTJDJTIwMiUyQyUyMDAlMkMlMjBwYWdlV2lkdGgtNCUyQyUyMDAlMjklM0IlMEElMEElMDklMDklMkYlMkElMjBhZGQlMjBleHRyYSUyMHBhZ2VzJTIwaWYlMjB0aGUlMjBkaXYlMjBzaXplJTIwaXMlMjBsYXJnZXIlMjB0aGFuJTIwYSUyMGE0JTIwc2l6ZSUyMCUyQSUyRiUwQSUwOSUwOWlmJTIwJTI4cGFnZWNvdW50JTIwJTNFJTIwMCUyOSUyMCU3QiUwQSUwOSUwOSUwOXZhciUyMGolMjAlM0QlMjAxJTNCJTBBJTA5JTA5JTA5d2hpbGUlMjAlMjhqJTIwJTIxJTNEJTIwcGFnZWNvdW50JTI5JTIwJTdCJTBBJTA5JTA5JTA5JTA5cGRmLmFkZFBhZ2UlMjglMjdwJTI3JTJDJTI3bW0lMjclMkMlMjdhNCUyNyUyOSUzQiUwQSUwOSUwOSUwOSUwOXBkZi5hZGRJbWFnZSUyOGltZ0RhdGElMkMlMjAlMjdQTkclMjclMkMlMjAyJTJDJTIwLSUyOGolMjAlMkElMjBwYWdlSGVpZ2h0JTI5JTJDJTIwcGFnZVdpZHRoLTQlMkMlMjAwJTI5JTNCJTBBJTA5JTA5JTA5JTA5aiUyQiUyQiUzQiUwQSUwOSUwOSUwOSU3RCUwQSUwOSUwOSU3RCUwQSUwOSUwOSUwQSUwOSUwOSUyRiUyQSUyMHRoZSUyMGxhc3QlMjBwYWdlJTIwaXMlMjBibGFuayUyMGZvciUyMHNvbWUlMjByZWFzb24lMkMlMjBzbyUyMGRlbGV0ZSUyMGl0JTIwJTJBJTJGJTBBJTA5JTA5cGRmLmRlbGV0ZVBhZ2UlMjhwZGYuaW50ZXJuYWwuZ2V0TnVtYmVyT2ZQYWdlcyUyOCUyOSUyOSUzQiUwQSUwQSUwOSUwOSUwOSUwOSUwOSUyRiUyQSUyMGZvcmNlcyUyMHRoZSUyMHVzZXIlMjB0byUyMHNhdmUlMjB0aGUlMjBmaWxlJTIwJTJBJTJGJTBBJTA5JTA5cGRmLnNhdmUlMjglMjduYW1lLnBkZiUyNyUyOSUzQiUwQSUwOSU3RCUyOSUzQiUwQSUwQSU3RCUyOSUzQg==[/vc_raw_html][/vc_column][/vc_row]