Generating a complex UI5 view to PDF (client-side)

[mario_maisto]

Hi there!

I have been struggling with creating a readable (simple, visually acceptable) PDF file on the client side from an UI5 view that consists of various tables/lists and forms (uxap page). At first I tried the simple way of using the Google Chrome's 'Print as PDF' solution, but the generated pdf ends somewhat in the middle of the page (basically prints only the part what you see).

That is when I started fiddling with the jsPdf as it has various options how to create a pdf. I would prefer the data to be as text (not image). At first I tried to create the pdf just by giving the main div id, that resulted in errors from the jsPdf generator (something to do with the wrapper divs, i guess).

So, without finding a 'magic', easy, automatic way to generate my view to pdf i started writing a code that gets the structured object, holding all of the data of the view, and starts 'walking' with it. The walk method checks the type of the part - when the part is type of array, it uses jsPdf.autoTable to create a table and when the part is an object, it should create a form type of thingie from the key-value pairs.

Right now I have managed to finish the prototype for the autotable part, but I am facing some problems - the tables have often lots of columns and the visual result is not very appealing. Furthermore - as the object keys are like 'firstName' or worse.. 'upFlrMgmgngmgnnt' (made that up.. but 'Upper Floor Management' would be the case), I still would have to write all the column names in the code (not the dynamic * let header = [Object.keys(aTable[0]).reduce(function (acc, current) { acc[current] = current; return acc; }, {})]; * way of creating the pdf I was going for).

So - If anyone has some advice on generating such (big) pdf from an UI5 page, I would be very interested about hearing your approach or thoughts about this - maybe you can share your knowledge :).

Best regards,

Mario

[avisheksharmacoder]

Right now I am trying to create PDFs using UI5 App but unfortunately I am only able to convert Text into PDFs, not entire Tables. I will make a blog post once I find a proper usable solution.

[former_member322772 · Accepted solution]

I usually push back on front-end PDF generation as it is far from ideal.

But, it can be quite easy to generate a HTML page and print that to the browser with window.print(), whereby users can then save as PDF. Either create a HTML string or you could probably retrieve the upper-most required div from the dom, and convert to a string and pass that to window.print().

[mario_maisto · Accepted solution]

Hi Luke,

thanks for your input - as for now, I went with the window.print(). I also tried the jsPdf + html2Canvas solution, but could not get the complex view to work (without the html2Canvas and the css it worked though, but lacked necessary styling) - the pdf either came out blank or skewed.

With window.print + some tweaking with the css styles, the overall result came out pretty decent.

Thanks again,

Mario