Fix PDF format

[taylorsmithgg]

Suggestion: https://atmospherejs.com/pascoual/pdfkit

Implement document-based pdf generation, as Blaze.saveAsPDF seems unreliable and has poor formatting support.

[aaronjudd]

For more background see: #52

In looking at pdfkit again, it looks like it now has client side functionality (not sure if that was always there or not). Not sure if the atmosphere package is exporting to client, but we'd probably want to include the pdfkit npm as a core library and export to client as well. One of my wish lists was to not have to have special pdf templates, reusing meteor templates. We'll need to see if this is possible (html -> pdf), or how difficult this would be for people to make customization if we use pdfkit.

[aaronjudd]

I built a test package to that installs pdfkit, with the same format as ongowork:pdf and tested that way. the problem with pdfkit, and the reason I didn't choose it the first time around... is that to support html-> pdf conversion you need http://wkhtmltopdf.org/ installed (and also true with a whole bunch other npm modules).

General requirements:

• we don't want to have to prep/manual install the environment if that can be avoided
• html to pdf for re-use of existing templates (so that we can use BlazeToHTML)
• prefer to reuse existing templates, but we could have special ones if we must, but should be user-legible (don't want anyone to have to learn special pdf speak).

For the umpteenth time, I wonder if PDF is something that is really required, VS a browser print screen or email.

[aaronjudd]

I've updated the formatting and given the pdf it's own layout. At least it now prints the info and is sort of useable as an invoice. It's still ugly, and the jsPDF formatting is impossibly broken / malfunctioning. I don't think this is the long term answer. I tried html2canvas to jsPDF as well: ie

  html2canvas $(document.body), onrendered: (canvas) ->
    imgData = canvas.toDataURL('image/png')
    doc = new jsPDF('p', 'mm')
    doc.addImage imgData, 'PNG', 10, 10
    doc.save 'sample-file.pdf'
    return

(had to add the html2canvas files for this)

This does render a fairly decent image of the invoice, and insert into a pdf, but I wasn't able to stream direct from Blaze to this - it had to be injected into an element, and then pass the element to the html2canvas. this was just a bit too kludge for me.

[danielgindi]

Maybe we should just use an HTML interpreter to parse HTML files and format PDF files? This way we will also be able to switch PDF libs if necessary...
I'm sure we can find something useful. Sometimes we can use modules that are not meant for that... I have recently used UglifyJS to tokenize the JS files in node.js apps, detect require statements and squash everything to one file. And it was kind of easy.

[gouthamve]

The layout problems could arise from the css source files (like bootstrap) not in the html rendered by Blaze. This means jsPDF doesn't see a stylesheet link.
Also we cannot deliver the css through cdn so we need to have the css in Reaction-core and stylesheet link it in the template to be rendered.

[aaronjudd]

from @gouthamve

This is frustrating, I couldn’t find the compiled css files or rather I didn’t want to use them (they are hidden in some random.css in .meteor/). So I added the official bootstrap in the public folder and linked it to the template. The rendered template used the new css file but jsPDF did not. I have no idea how jsPDF works :( Any ideas @aaronjudd ?

[gouthamve]

I looked into some alternates because jsPDF is not reliable for html to pdf conversion. I found two options:

1. Phantomjs: We could use phantom js and render the pdf.
2. Using the browsers print/export to PDF functionality: We can show the invoice and add a button which triggers the browser function.

I am in favour of having Phantomjs instead of second option as it seems natural but I havent had time so I dont know if its possible to produce PDFs using phantom in Meteor.

[aaronjudd]

See #52 re phantomjs: it worked, sort of, but we had issues with it as well. That was the initial solution I implemented.