Generating PDF from a webpage using JavaScript

A requisite for a project i was working on a while back was to generate a reader like version of a webpage and export it to PDF.
I started by getting a printable format for the webpage which was not that difficult, just removing some classes and adding some css with Jquery.

Now came the fun part.

What if i could do all of this on the client side, using JavaScript.

Imagine you're the server and your project manager is the browser. What a fine day it would be when a project manager interrupts you with something he/she could do.
Moreover i would save some cpu cycles on the server and learn something new in the process.

So with the help of stackoverflow my journey began.
What do i need :

• Something to generate PDF in JavaScript -I came across jsPDF it has a very simple API and is really simple to use.
• Now i need something that can make like a screenshot of the element . Again with the help of StackOverflow i came across  - html2canvas .

Using both together is really simple

        html2canvas($("#canvas"), {
            onrendered: function(canvas) {         
                var imgData = canvas.toDataURL(
                    'image/png');              
                var doc = new jsPDF('p', 'mm');
                doc.addImage(imgData, 'PNG', 10, 10);
                doc.save('sample-file.pdf');
            }
        });

From post at stackoverflow.com

I do recommend taking a look at the of jsPDF Examples
If your files are coming out a bit on the large size you may also compress it -jsPDF constructor has a flag to enable compression. My pdf came from about 14 megs to 240kb.

 The trickiest bit happens when your image is bigger than a page. In that case you must treat your image like a sliding window, effective splitting the image through several pages. A good example code can be found on

• jsPDF/issues/434
• stackoverflow.com questions

Hopefully you find this useful, i have tried to gather most of the sources i went through to learn.
Credit to the devs @ stackoverflow .


And thanks to those that :

Thinking about the past , moving to the future

Image retrieved at wired

Some days ago on my 35th birthday, after a number of surprises from my future wife and my parents, i found myself digging into my past on some old boxes my parents had at their home. Found stuff ranging from  cheesy late 80's Portuguese music to 56k modem's and a passively cooled Riva TNT.
Gaming of course was already a big part of my life back then, even more so than today i regret to admit, so i had a good time going through my old gaming systems (Master System, Sega Saturn, Sega Dreamcast - yep i'm a Sega guy -  PC builds) and a lot of magazines.
A particular magazine from 1995 had a review of Phantasmagoria.  I must admit the FMV point and click genre always passed me by - not sure if the sheer amount of cds or the movie quality itself - but i was never drawn into it.
At that time some - Ripper  for instance - even had a cast that would make a wanna be movie director give some limbs for.
The general consensus at the time was that a mouse was not the best tool to experience such artistic achievements - "if i wanna read a book ,i'll read a book..if i wanna watch a movie, i'll watch a movie i don't see the need to click a mouse to go through it" was a quote i can't pinpoint exactly to whom said but seemed the general opinion.
Moving on to 2018, VR/AR is gaining more and more traction, gaming has become the number one entertainment in terms of revenue - nasdaq.com - so how really far are we from movie studios converting some movies into games - a side adventure on the universe of "Blade Runner 2049" would make this particular person pay without looking back.
A few examples i have found are

• Awake 
• Night Trap 2 

 Are there any more that you are aware of?

I usually like to write, think, listening to music. So if this post can be described by a song my choice goes to 

How to convert Pem certificate to Hex string in Java (a stackoverflow conglumerate)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

//******************************************************************* // Welcome to CompileJava! // If you experience any issues, please contact us ('More Info') --> //******************************************************************* import java.lang.Math; // headers MUST be above the first class import java.util.Base64; // one class needs to have a main() method public class HelloWorld { public static String toHexString( byte[] bytes ) { StringBuffer sb = new StringBuffer( bytes.length*2 ); for( int i = 0; i < bytes.length; i++ ) { sb.append( toHex(bytes[i] >> 4) ); sb.append( toHex(bytes[i]) ); } return sb.toString(); } private static char toHex(int nibble) { final char[] hexDigit = { '0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F' }; return hexDigit[nibble & 0xF]; } // arguments are passed using the text field below this editor public static void main(String[] args) { String pemText="-----BEGIN CERTIFICATE-----"+ "blablabla"+ "-----END CERTIFICATE-----"; byte[] certificateBytes = Base64.getDecoder().decode( pemText.replaceAll("-----(BEGIN|END) CERTIFICATE-----", "").replaceAll("\n", "").getBytes() ); System.out.println(toHexString(certificateBytes)); } }

That nice function you didn't know existed

Today while trying to solve a problem with PLSQL i came across  DBMS_UTILITY.FORMAT_ERROR_BACKTRACE  dba-oracle.com

This nice function gives you a more complete backtrace of where the exception ocurred.
Me afterwards:

When we didn't call it a blockchain

Blockchain seems to be one of the buzz words in the tech world right now - at WebSummit 2017 for sure one of the 3 top words i retained - and some hope with a bright future ahead.
For the non tech it's the way bitcoin works.
Trying to learn more about the technology i came across Learn Blockchains by making one.
And a sentence resonated with something i had done in the past

At this point, the idea of a chain should be apparent—each new block contains within itself, the hash of the previous Block

SAFT-PT (Standard Audit File for Tax purposes Portuguese Version) uses this method to easily identify and verify the correctness of a series of invoices and other tax related documents.
Part of my first job was implementing this on what was then OpenERP (now Odoo) in order to get the program certified by the DGCI (Portugal's main Institute of tax related matters). If you wish to take a closer look at file's structure it is available at SAFT-PT XSD.

Each block is formed by

• InvoiceDate
• SystemEntryDate
• InvoiceNo
• GrossTotal
• Hash (hash of the former document thus creating a chain)

DGCI supplies a validator for the file given the public key and the SAFT-PT file.
On any invoice you will find a sequence of 4 characters (corresponding to the 1º, o 11º, o 21º e o 31º digits of the store signature) followed by the name of the certified company.
If you use Odoo and wish to take a look at a base implementation it can be found here - Odoo SAFT-PT- it is not complete and but it should be nice as a basis for a complete implementation.


PS: This article is also available at my LinkedIn.

Now for something completely different

It has been an eternity i have posted anything here, not that i have done anything in the meanwhile but simply life took the best of me.
I was lucky enough to get tickets for @WebSummit in Lisbon, and it was a humbling and motivating experience at the same time. Went with my friend and WordPress master and VR/AR enthusiast Pedro de Carvalho @ twitter and it sure opened my eyes and mind for many new things.

One of the projects i have setup my self for this year was to loose weight and take "Improvement Dedication Success" a bit more physical not just on tech side of things. I must recommend Nokia Body Cardio as it during these last past months it has allowed me to tailor my behaviour, exercise and eating habits to make sure it sticks.

Now a word from the man who inspired me the name this blog "Improvement.."

 I'll try to keep posting more frequently.

WxWidgets / GTK and Vulkan

There is a project called RPCS3 which aims to emulate the PS3 gaming console.
Being a Linux user and a someone who enjoys emulation i felt i could give a hand , limited to my knowledge and time, but something that would help.
After some time, too much in fact, and helped by the community surrounding the emulator - https://github.com/RPCS3/rpcs3/issues/2186#issuecomment-255329581 - i was able to achieve something.

Also due to take a look at https://gist.github.com/graphitemaster/e162a24e57379af840d4 if you are willing to start with Vulkan.

The application uses WxWidgets as its GUI lib, and it can have a lot of backends (GTK2,GTK3,Windows) etc.. so the main work was to retrieve the X11 surface id to create a swapchain and integrate it with all the amazing code the team had already made.
A snippet of the code, for GTK2, is below

1 2 3 4 5

GtkWidget * widget=(GtkWidget*)m_frame->handle();     gtk_widget_realize(widget);     Display* display = GDK_DISPLAY_XDISPLAY(gtk_widget_get_display(widget));      xcb_connection_t * c=XGetXCBConnection(display);     xcb_window_t w;

More info can be found at http://stackoverflow.com/questions/14788439/getting-x11-window-handle-from-gtkwidget

Also GCC not being able to compile the code whereas Clang would was a nice surprise :) Go Apple Go i guess :)

There are some bugs to be handled, however