7 ms·

Pdfmake – PDF printing in pure JavaScript

185 points by tilt 11y ago

mp3geek 11y ago
Little of topic. What would be nice is to have something like "print to pdf, aka save page as pdf" via a browser using pdfjs.
- id 11y ago
  In Chrome you can press Ctrl+P and select "Save as a PDF".
- c22 11y ago
  "PDF" is a valid application-agnostic printer target on the Debian box I am using.
  - copperx 11y ago
    In OS X too. I believe Windows is the only OS that needs you to install a PDF printer.
    - walterbell 11y ago
      On Windows, CutePDF uses Ghostscript for the virtual printer. On iOS, Apple disabled the API for local virtual printers. There are various "html-to-pdf" apps, but these often perform a non-interactive fetch of the source web page, which use different auth/cookies and can result in a PDF which is different from the one displayed by Safari.
adiM 11y ago
Just looked at the sample on the playground section of the website. No hyphenation, no ligatures, and overall the output looks ugly (compared to TeX). What is the advantage over simply creating an appropriate LaTeX/ConTeXt document in the background and serving that?
- andrewstuart2 11y ago
  Agreed on the LaTeX front. The best part is that it's native and cross-platform on the backend, but there also exist libraries to render client-side in JS, though I can't say I've used any of them.
- ef4 11y ago
  For the same reason everything eventually gets rewritten in Javascript: sometimes you want to do it in a browser. In my case, I have a Javascript app that stores critical information for offline use, and users want to be able to print that information nicely. So I generate PDFs in Javascript. This could make that much easier.
  - e12e 11y ago
    > For the same reason everything eventually gets rewritten in Javascript: sometimes you want to do it in a browser. Indeed: http://manuels.github.io/texlive.js/ http://manuels.github.io/texlive.js/
    - Garlef 11y ago
      Deprecating TeX is long overdue - for example creating non-book layouts (i.e. magazines) is a real pain. So: A a TeX compiler that can be called from JS can only be an intermediate solution. I think http://txtjs.com/ http://txtjs.com/ goes in the right direction.
      - e12e 11y ago
        Actually with css-hyphens[ch], I think html/css has finally taken a leap towards usable text -- something that has been sorely lacking (mostly due to a kind of regression across browsers, where everyone seem to have given up on making html work for text, without a ridiculous amount of css, and maybe even js/canvas/svg. This is related to the avoidance of user style-sheets, and the idea that a bare bones hypertext documents could actually be useful. There's not really anything preventing browsers from presenting an un-styled html-page like how A-list-apart styles their articles -- absent any css-reset/css-styles). I don't really think calling TeX from js is a very good idea, nor do I really think canvas is a good idea either. I do wish Adobe had gained more traction with css regions[cr] -- although I also understand some of the arguments against them[ch]. I still think the idea is good: css for style, semantic html for ... semantics -- and "layout html" for layout. I think pairing semantic markup with css columns is just a bad idea -- and it gives the kind of "half-power" that initially lead people to use tables for layout. So Lie is right in that css regions aren't a great fit for html[ch] -- but I still think they're the best fit for html I've come across. I might be convinced that css regions are the kind of things that fit well with js/poly-fills[pf] -- although I'm sceptical. We know fonts are turing complete and have had security issues -- I don't see why we should need to implement core layout with js. At least I suppose "rogue" software vendors can choose to support css regions[cr] -- For eg an e-book reader based off of a subset of html+css, css regions might be a good fit, while avoiding the complexity of adding js support, and trying to make that secure (including proof against denial of service etc). Thanks for the link to texjs, though -- I'll definitely have a closer look. [ch] http://caniuse.com/css-hyphens http://caniuse.com/css-hyphens [ha] http://alistapart.com/blog/post/css-regions-considered-harmful http://alistapart.com/blog/post/css-regions-considered-harmf... [cr] http://caniuse.com/css-regions http://caniuse.com/css-regions [pf] http://webplatform.adobe.com/css-regions-polyfill/ http://webplatform.adobe.com/css-regions-polyfill/
brady8 11y ago
This looks really well done. Any chance that it could emulate the functionality of wkhtmltopdf in the browser (a.k.a. CSS styling, structure from HTML)?
- SigmundA 11y ago
  I would say pretty low wkhtmltopdf like PhantomJS uses Webkit to layout HTML then converts that layout to PDF, HTML layout including CSS and javascript execution is a heavy lift, this library only scratches the surface of what would be needed to cover wkhtmltopdf. First you would need a pure js web browser, the closest thing currently being zombie I think. If you didn't care about running on the server then you could take advantage of the browser the lib is running in to get the current computed layout from the active dom and transform into the PDF layout, still a big job but the heavy lift is done by the browser. Telerik does this in their Kendo lib, where they render a active dom element to thier abstracted vector graphics model, then have PDF, SVG and Canvas renders for that: http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom http://docs.telerik.com/kendo-ui/framework/drawing/drawing-d...
imaginenore 11y ago
How does it compare to Mozilla's PDF.js https://mozilla.github.io/pdf.js/ https://mozilla.github.io/pdf.js/ or Parallax's jsPDF https://parall.ax/products/jspdf https://parall.ax/products/jspdf
- hliyan 11y ago
  PDF.js is a Portable Document Format (PDF) viewer. jsPDF prints using: var doc = new jsPDF(); doc.setFontSize(40); doc.text(35, 25, "Paranyan loves jsPDF"); doc.addImage(imgData, 'JPEG', 15, 40, 180, 160); Pdfmake on the other hand: var dd = { content: [ 'First paragraph', 'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines' ] }
  - z3t4 11y ago
    jsPDF doesn't trim each line like Pdfmake does. Pdfmake however supports new pages, witch jsPDF doesn't. Would be cool if Pdfmake didn't trim the lines!
    - alexbilbie 11y ago
      jsPDF has a method called `addPage()` which adds a new page
  - XCSme 11y ago
    Well, I have used PDF.js and it is great. I think it also has printable option.
phs2501 11y ago
There's also https://github.com/devongovett/pdfkit https://github.com/devongovett/pdfkit, which I've used to bulk-print ticket envelopes for an event. It does support multiple pages, as I had one PDF file per event occurrence (with 50-80 envelopes per).
- abusque 11y ago
  pdfmake is actually built on top of pdfkit.
beatpanda 11y ago
Right now I'm using PhantomJS to render an HTML page. It supports styling via CSS, multiple pages, etc etc. What advantages does this have?
- SigmundA 11y ago
  PhantomJS is a full web browser that just happens to output PDF's. This is a library to create PDF's with it's own layout model that shares nothing with HTML. Much simpler and low level.
  - beatpanda 11y ago
    Is it really simpler? I have to learn a DSL to create PDFs with this, whereas I can just use HTML in the other case.
    - fourstar 11y ago
      You are using a school bus to transport one person.
      - wmf 11y ago
        But the bus is free and it works fine.
        catshirt 11y ago
        but it comes with schoolbus-type problems and you look ridiculous.
        beatpanda 11y ago
        Our customers don't see it so it doesn't matter how we "look". We can re-use existing design assets and UI elements. I can embed SVG charts drawn by D3, or anything else I can otherwise do with "an entire school bus".
    - 11y ago
seanemmer 11y ago
I used PDFMake on a recent project and was very pleased. One issue we ran into in browser was the huge size overhead from vfs_fonts - is there a preferred workaround to this issue (we had to serve it separately from the rest of the app), or any solution in the pipeline?
mhuffman 11y ago
Cudos! PDF has a god-awful spec., with which I am intimate. I am impressed with what you have been able to do. I don't think most people realize that the spec. for PDF is over 1,000 pages is and was written by bipolar sadists.
- pcthrowaway 11y ago
  Is this really longer than the combined specs for HTML and CSS?
devongovett 11y ago
pdfmake is based on my PDFKit project http://github.com/devongovett/pdfkit http://github.com/devongovett/pdfkit, which does the actual PDF generation under the hood. pdfmake is a layout engine on top of PDFKit supporting a nice declarative json document description format.
- SiVal 11y ago
  Has anyone here done a comparison of server-side PDF generators? PDFKit, ReportLab, etc?
zenocon 11y ago
Does this support svg images (e.g. d3.js charts)?
- jamespaden 11y ago
  Commercial, but DocRaptor does with some additional Javascript parsing on top of PrinceMXL
ef4 11y ago
Nice. This is something I have wanted to find time to write and I'm glad somebody else already has. I use pdfkit because I have an offline-capable JS app with fairly rich document printing needs. A friendly layout engine on top can save a lot of effort making nice designs.
beagle3 11y ago
Does any of these PDF making solutions properly support RTL languages like Arabic and Hebrew?

185 points by tilt 11y ago

Little of topic. What would be nice is to have something like "print to pdf, aka save page as pdf" via a browser using pdfjs.

id 11y ago
In Chrome you can press Ctrl+P and select "Save as a PDF".
c22 11y ago
"PDF" is a valid application-agnostic printer target on the Debian box I am using.
- copperx 11y ago
  In OS X too. I believe Windows is the only OS that needs you to install a PDF printer.
  - walterbell 11y ago
    On Windows, CutePDF uses Ghostscript for the virtual printer. On iOS, Apple disabled the API for local virtual printers. There are various "html-to-pdf" apps, but these often perform a non-interactive fetch of the source web page, which use different auth/cookies and can result in a PDF which is different from the one displayed by Safari.

adiM 11y ago

Just looked at the sample on the playground section of the website. No hyphenation, no ligatures, and overall the output looks ugly (compared to TeX). What is the advantage over simply creating an appropriate LaTeX/ConTeXt document in the background and serving that?

andrewstuart2 11y ago
Agreed on the LaTeX front. The best part is that it's native and cross-platform on the backend, but there also exist libraries to render client-side in JS, though I can't say I've used any of them.
ef4 11y ago
For the same reason everything eventually gets rewritten in Javascript: sometimes you want to do it in a browser. In my case, I have a Javascript app that stores critical information for offline use, and users want to be able to print that information nicely. So I generate PDFs in Javascript. This could make that much easier.
- e12e 11y ago
  > For the same reason everything eventually gets rewritten in Javascript: sometimes you want to do it in a browser. Indeed: http://manuels.github.io/texlive.js/ http://manuels.github.io/texlive.js/
  - Garlef 11y ago
    Deprecating TeX is long overdue - for example creating non-book layouts (i.e. magazines) is a real pain. So: A a TeX compiler that can be called from JS can only be an intermediate solution. I think http://txtjs.com/ http://txtjs.com/ goes in the right direction.
    - e12e 11y ago
      Actually with css-hyphens[ch], I think html/css has finally taken a leap towards usable text -- something that has been sorely lacking (mostly due to a kind of regression across browsers, where everyone seem to have given up on making html work for text, without a ridiculous amount of css, and maybe even js/canvas/svg. This is related to the avoidance of user style-sheets, and the idea that a bare bones hypertext documents could actually be useful. There's not really anything preventing browsers from presenting an un-styled html-page like how A-list-apart styles their articles -- absent any css-reset/css-styles). I don't really think calling TeX from js is a very good idea, nor do I really think canvas is a good idea either. I do wish Adobe had gained more traction with css regions[cr] -- although I also understand some of the arguments against them[ch]. I still think the idea is good: css for style, semantic html for ... semantics -- and "layout html" for layout. I think pairing semantic markup with css columns is just a bad idea -- and it gives the kind of "half-power" that initially lead people to use tables for layout. So Lie is right in that css regions aren't a great fit for html[ch] -- but I still think they're the best fit for html I've come across. I might be convinced that css regions are the kind of things that fit well with js/poly-fills[pf] -- although I'm sceptical. We know fonts are turing complete and have had security issues -- I don't see why we should need to implement core layout with js. At least I suppose "rogue" software vendors can choose to support css regions[cr] -- For eg an e-book reader based off of a subset of html+css, css regions might be a good fit, while avoiding the complexity of adding js support, and trying to make that secure (including proof against denial of service etc). Thanks for the link to texjs, though -- I'll definitely have a closer look. [ch] http://caniuse.com/css-hyphens http://caniuse.com/css-hyphens [ha] http://alistapart.com/blog/post/css-regions-considered-harmful http://alistapart.com/blog/post/css-regions-considered-harmf... [cr] http://caniuse.com/css-regions http://caniuse.com/css-regions [pf] http://webplatform.adobe.com/css-regions-polyfill/ http://webplatform.adobe.com/css-regions-polyfill/

brady8 11y ago

This looks really well done. Any chance that it could emulate the functionality of wkhtmltopdf in the browser (a.k.a. CSS styling, structure from HTML)?

SigmundA 11y ago
I would say pretty low wkhtmltopdf like PhantomJS uses Webkit to layout HTML then converts that layout to PDF, HTML layout including CSS and javascript execution is a heavy lift, this library only scratches the surface of what would be needed to cover wkhtmltopdf. First you would need a pure js web browser, the closest thing currently being zombie I think. If you didn't care about running on the server then you could take advantage of the browser the lib is running in to get the current computed layout from the active dom and transform into the PDF layout, still a big job but the heavy lift is done by the browser. Telerik does this in their Kendo lib, where they render a active dom element to thier abstracted vector graphics model, then have PDF, SVG and Canvas renders for that: http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom http://docs.telerik.com/kendo-ui/framework/drawing/drawing-d...

imaginenore 11y ago

How does it compare to Mozilla's PDF.js https://mozilla.github.io/pdf.js/ https://mozilla.github.io/pdf.js/ or Parallax's jsPDF https://parall.ax/products/jspdf https://parall.ax/products/jspdf

hliyan 11y ago
PDF.js is a Portable Document Format (PDF) viewer. jsPDF prints using: var doc = new jsPDF(); doc.setFontSize(40); doc.text(35, 25, "Paranyan loves jsPDF"); doc.addImage(imgData, 'JPEG', 15, 40, 180, 160); Pdfmake on the other hand: var dd = { content: [ 'First paragraph', 'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines' ] }
- z3t4 11y ago
  jsPDF doesn't trim each line like Pdfmake does. Pdfmake however supports new pages, witch jsPDF doesn't. Would be cool if Pdfmake didn't trim the lines!
  - alexbilbie 11y ago
    jsPDF has a method called `addPage()` which adds a new page
- XCSme 11y ago
  Well, I have used PDF.js and it is great. I think it also has printable option.

phs2501 11y ago

There's also https://github.com/devongovett/pdfkit https://github.com/devongovett/pdfkit, which I've used to bulk-print ticket envelopes for an event. It does support multiple pages, as I had one PDF file per event occurrence (with 50-80 envelopes per).

abusque 11y ago
pdfmake is actually built on top of pdfkit.

beatpanda 11y ago

Right now I'm using PhantomJS to render an HTML page. It supports styling via CSS, multiple pages, etc etc. What advantages does this have?

SigmundA 11y ago
PhantomJS is a full web browser that just happens to output PDF's. This is a library to create PDF's with it's own layout model that shares nothing with HTML. Much simpler and low level.
- beatpanda 11y ago
  Is it really simpler? I have to learn a DSL to create PDFs with this, whereas I can just use HTML in the other case.
  - fourstar 11y ago
    You are using a school bus to transport one person.
    - wmf 11y ago
      But the bus is free and it works fine.
      - catshirt 11y ago
        but it comes with schoolbus-type problems and you look ridiculous.
        beatpanda 11y ago
        Our customers don't see it so it doesn't matter how we "look". We can re-use existing design assets and UI elements. I can embed SVG charts drawn by D3, or anything else I can otherwise do with "an entire school bus".
  - 11y ago

seanemmer 11y ago

I used PDFMake on a recent project and was very pleased. One issue we ran into in browser was the huge size overhead from vfs_fonts - is there a preferred workaround to this issue (we had to serve it separately from the rest of the app), or any solution in the pipeline?

mhuffman 11y ago

Cudos! PDF has a god-awful spec., with which I am intimate. I am impressed with what you have been able to do. I don't think most people realize that the spec. for PDF is over 1,000 pages is and was written by bipolar sadists.

pcthrowaway 11y ago
Is this really longer than the combined specs for HTML and CSS?

devongovett 11y ago

pdfmake is based on my PDFKit project http://github.com/devongovett/pdfkit http://github.com/devongovett/pdfkit, which does the actual PDF generation under the hood. pdfmake is a layout engine on top of PDFKit supporting a nice declarative json document description format.

SiVal 11y ago
Has anyone here done a comparison of server-side PDF generators? PDFKit, ReportLab, etc?

zenocon 11y ago

Does this support svg images (e.g. d3.js charts)?

jamespaden 11y ago
Commercial, but DocRaptor does with some additional Javascript parsing on top of PrinceMXL

ef4 11y ago

Nice. This is something I have wanted to find time to write and I'm glad somebody else already has. I use pdfkit because I have an offline-capable JS app with fairly rich document printing needs. A friendly layout engine on top can save a lot of effort making nice designs.

beagle3 11y ago

Does any of these PDF making solutions properly support RTL languages like Arabic and Hebrew?