5 ms·

Can you tell Firefox to print in headless mode? I want to write reports using HTML and JS, but printing is always an issue.

randlet 9y ago
You can generate pdfs with headless Chromium/Chrome pretty easily[1]. chromium-browser --headless --disable-gpu --print-to-pdf=output_file_name.pdf file:///path/to/your/html [1] https://developers.google.com/web/updates/2017/04/headless-chrome#create_a_pdf_dom https://developers.google.com/web/updates/2017/04/headless-c...
- bartread 9y ago
  Wow - thanks for posting that: could come in handy on the project I'm currently working on!
  - newhere420 9y ago
    We're using Chrome Headless inside Docker to produce thousands of PDF reports from an Angular/D3 web app. It works very well, but there are some gotchas with regard to the Chrome Remoting Interface.
    - reagan83 9y ago
      Can you elaborate on some of the issues you're having in the Chrome Remote Interface?
    - perryprog 9y ago
      Is this open source? It would be very interesting to take a look at!
    - bartread 9y ago
      Yeah, D3 is what we're working with as well; also need to be able to embed the charts in Powerpoint, but that'll be a different story. All fun and games.
      - kuschku 9y ago
        You can use inkscape’s CLI interface to get SVG from pdf, and then manipulate that with any XML editing library automatically
- megous 9y ago
  If only browsers supported creation of page headers and footers.
  - deleted 9y ago
    [deleted]
  - addedlovely 9y ago
    @page { @top-center { content: element(pageHeader); } } #pageHeader{ position: running(pageHeader); } http://www.w3.org/TR/css3-gcpm/#running-elements http://www.w3.org/TR/css3-gcpm/#running-elements
    - underbluewaters 9y ago
      Thank you for this. I've been doing this so wrong for a long time.
  - dflock 9y ago
    True - but you can get them to output to PDF, then composite/stamp this pdf onto a PDF with headers/footers/whatever on it. This is very easy to do with pdftk.
- reagan83 9y ago
  I built a simple REST API that wraps this call for my other projects and it's been working great the past few months. If this would be useful to you my contact info is in my profile.
- developer2 9y ago
  Any idea when exactly the PDF capture is performed? So many pages now render a minimal initial load, while the actual content is greatly delayed (usually < 100ms, but sometimes 3+ seconds) due to being loaded from one or more AJAX sources. Capturing the PDF at even the onload event (let alone the useless DOMContentLoaded event) is going to capture an incomplete picture in a huge number of situations. Frankly, a PDF capture at onload event is going to be utterly unusable. Is there a way to set a delay before capturing, ie: 10 seconds? In an ideal world, a true "finished loading" event would trigger only after all DOMContentLoaded and onload handlers are executed, only once any AJAX requests launched by such handlers are completed (including requests fired off in their handlers, recursively). Of course, websockets and long polling ajax would still interfere with detecting a true "finished" event, but it'd be better than setting an artificially large delay of 10+ seconds.
  - randlet 9y ago
    That's a good question but I don't know the answer. The reports we generate don't use js so I've never needed to investigate.
  - Sacho 9y ago
    I don't think this feature is "utterly unusable". You can run your JS, wait for whatever events you want, and then pipe the resulting HTML to a --print-to-pdf command.
    - developer2 9y ago
      The primary reason to print a pdf would be to do so to any random 3rd party page. Sadly, you have no control over how 3rd party sites render/load their content. And --print-to-pdf likely captures the render of the page at some predetermined point, my guess being the "onload" event. Which, again, is not going to result in a fully rendered page for many sites that load in their primary content using AJAX.
  - zimpenfish 9y ago
    Amusingly, I had this same problem back in ~1999 when trying to automatically screen capture webpages with Netscape on X. Except then it was just a case of "wait 30 seconds and pray" because there was none of this fanciness. (bloody kids, get off my lawn, banging two rocks together, etc.)
dsr_ 9y ago
Remember that if you pass through any data from an outside source, you're running their code on your browser when you thought you were just printing a document. The security issues don't apply in all circumstances, of course, but if you feel like taking a shortcut to PDF generation and printing through a headless browser, you need to keep them in mind.
- foreigner 9y ago
  Rendering a PDF you got some other way is also "Running their code", just in a different sandbox :-)
  - Piskvorrr 9y ago
    I don't think you're thinking of the same case: this is "open a browser, and output a PDF"; not "read a PDF."
- NathanKP 9y ago
  I highly recommend that anyone using a headless browser that may access outside sources employ something like this to run the headless browser in an external environment, in this case AWS Lambda: https://github.com/justengland/phantom-lambda-template https://github.com/justengland/phantom-lambda-template I used this approach for a project at a previous company and not only did it keep the potentially unsafe external code execution isolated from the rest of the stack, but it also proved to be fantastically scalable because of the ability to have AWS Lambda running many headless browsers in parallel compared to trying to scale something like this out on your own hardware.
  - noir_lord 9y ago
    That's a neat approach, I'm not on anything like that scale though, looking for something to get rid of JasperReports.
    - b15h0p 9y ago
      Did you find any library that implements this? I mean, it should not be hard to implement, just slap together some templating language like thymeleaf or velocity and shell it to the headless browser. But still, it would be nice to have all this already implemented.
TimTheTinker 9y ago
If you need professional typesetting from HTML+CSS, Prince XML is still king, I'm pretty sure. It can be invoked & run heedlessly. It also supports page-oriented CSS declarations and variables, like headers, footers, page numbers, etc.
- cakeface 9y ago
  What are the features that make Prince XML better than headless chrome? Prince XML is not open source or cheap.
  - trynewideas 9y ago
    Simply put, it's designed to make PDF output and provides a lot of quality-of-life tooling around that. Better support for CSS paged media and non-HTML XML input, better handling of page-spanning tables, shims for things missing from paged media (like hyphenation and ligature controls, PDF-specific objects to modify output with Javascript, Javascript embeds into PDF output), better out-of-the-box styles, better documentation and support, and more predictable output and better debugging tools. Browsers are catching up on paged media options, but they're not all the way there yet. The rest of the stuff Prince does is not (and arguably shouldn't be) in the scope of headless Chrome. There was a brief moment where headless Chrome supported flexbox in print before Prince did, but that was fixed a month or so ago in Prince dev and should land in production soon if it hasn't already.
  - ux-app 9y ago
    PrinceXML is in a league of it's own. Very, very light weight. Very fast and it has outstanding output. The price tag is steep for sure, but if your business relies on PDF output then nothing comes close.
    - _pmf_ 9y ago
      Do you use it in the context of technical documentation? Does it make using Docbook a bearable experience?
lessclue 9y ago
One word -- wkhtmltopdf
- reagan83 9y ago
  I've used wkhtmltopdf for years and it's really great. However, having a browser (headless Chrome and now Firefox) render the page closes the gap between what we build in HTML and what we want to output in a PDF, without having to deal with nuances of the wkhtmltopdf rendering engine.
_e 9y ago
It just hit me why people continue to ask for headless browsers to be able to print to PDF -- for reports! To get better control of the print job, do you ever use Adobe InDesign?

randlet 9y ago

You can generate pdfs with headless Chromium/Chrome pretty easily[1]. chromium-browser --headless --disable-gpu --print-to-pdf=output_file_name.pdf file:///path/to/your/html [1] https://developers.google.com/web/updates/2017/04/headless-chrome#create_a_pdf_dom https://developers.google.com/web/updates/2017/04/headless-c...

bartread 9y ago
Wow - thanks for posting that: could come in handy on the project I'm currently working on!
- newhere420 9y ago
  We're using Chrome Headless inside Docker to produce thousands of PDF reports from an Angular/D3 web app. It works very well, but there are some gotchas with regard to the Chrome Remoting Interface.
  - reagan83 9y ago
    Can you elaborate on some of the issues you're having in the Chrome Remote Interface?
  - perryprog 9y ago
    Is this open source? It would be very interesting to take a look at!
  - bartread 9y ago
    Yeah, D3 is what we're working with as well; also need to be able to embed the charts in Powerpoint, but that'll be a different story. All fun and games.
    - kuschku 9y ago
      You can use inkscape’s CLI interface to get SVG from pdf, and then manipulate that with any XML editing library automatically
megous 9y ago
If only browsers supported creation of page headers and footers.
- deleted 9y ago
  [deleted]
- addedlovely 9y ago
  @page { @top-center { content: element(pageHeader); } } #pageHeader{ position: running(pageHeader); } http://www.w3.org/TR/css3-gcpm/#running-elements http://www.w3.org/TR/css3-gcpm/#running-elements
  - underbluewaters 9y ago
    Thank you for this. I've been doing this so wrong for a long time.
- dflock 9y ago
  True - but you can get them to output to PDF, then composite/stamp this pdf onto a PDF with headers/footers/whatever on it. This is very easy to do with pdftk.
reagan83 9y ago
I built a simple REST API that wraps this call for my other projects and it's been working great the past few months. If this would be useful to you my contact info is in my profile.
developer2 9y ago
Any idea when exactly the PDF capture is performed? So many pages now render a minimal initial load, while the actual content is greatly delayed (usually < 100ms, but sometimes 3+ seconds) due to being loaded from one or more AJAX sources. Capturing the PDF at even the onload event (let alone the useless DOMContentLoaded event) is going to capture an incomplete picture in a huge number of situations. Frankly, a PDF capture at onload event is going to be utterly unusable. Is there a way to set a delay before capturing, ie: 10 seconds? In an ideal world, a true "finished loading" event would trigger only after all DOMContentLoaded and onload handlers are executed, only once any AJAX requests launched by such handlers are completed (including requests fired off in their handlers, recursively). Of course, websockets and long polling ajax would still interfere with detecting a true "finished" event, but it'd be better than setting an artificially large delay of 10+ seconds.
- randlet 9y ago
  That's a good question but I don't know the answer. The reports we generate don't use js so I've never needed to investigate.
- Sacho 9y ago
  I don't think this feature is "utterly unusable". You can run your JS, wait for whatever events you want, and then pipe the resulting HTML to a --print-to-pdf command.
  - developer2 9y ago
    The primary reason to print a pdf would be to do so to any random 3rd party page. Sadly, you have no control over how 3rd party sites render/load their content. And --print-to-pdf likely captures the render of the page at some predetermined point, my guess being the "onload" event. Which, again, is not going to result in a fully rendered page for many sites that load in their primary content using AJAX.
- zimpenfish 9y ago
  Amusingly, I had this same problem back in ~1999 when trying to automatically screen capture webpages with Netscape on X. Except then it was just a case of "wait 30 seconds and pray" because there was none of this fanciness. (bloody kids, get off my lawn, banging two rocks together, etc.)

dsr_ 9y ago

Remember that if you pass through any data from an outside source, you're running their code on your browser when you thought you were just printing a document. The security issues don't apply in all circumstances, of course, but if you feel like taking a shortcut to PDF generation and printing through a headless browser, you need to keep them in mind.

foreigner 9y ago
Rendering a PDF you got some other way is also "Running their code", just in a different sandbox :-)
- Piskvorrr 9y ago
  I don't think you're thinking of the same case: this is "open a browser, and output a PDF"; not "read a PDF."
NathanKP 9y ago
I highly recommend that anyone using a headless browser that may access outside sources employ something like this to run the headless browser in an external environment, in this case AWS Lambda: https://github.com/justengland/phantom-lambda-template https://github.com/justengland/phantom-lambda-template I used this approach for a project at a previous company and not only did it keep the potentially unsafe external code execution isolated from the rest of the stack, but it also proved to be fantastically scalable because of the ability to have AWS Lambda running many headless browsers in parallel compared to trying to scale something like this out on your own hardware.
- noir_lord 9y ago
  That's a neat approach, I'm not on anything like that scale though, looking for something to get rid of JasperReports.
  - b15h0p 9y ago
    Did you find any library that implements this? I mean, it should not be hard to implement, just slap together some templating language like thymeleaf or velocity and shell it to the headless browser. But still, it would be nice to have all this already implemented.

TimTheTinker 9y ago

If you need professional typesetting from HTML+CSS, Prince XML is still king, I'm pretty sure. It can be invoked & run heedlessly. It also supports page-oriented CSS declarations and variables, like headers, footers, page numbers, etc.

cakeface 9y ago
What are the features that make Prince XML better than headless chrome? Prince XML is not open source or cheap.
- trynewideas 9y ago
  Simply put, it's designed to make PDF output and provides a lot of quality-of-life tooling around that. Better support for CSS paged media and non-HTML XML input, better handling of page-spanning tables, shims for things missing from paged media (like hyphenation and ligature controls, PDF-specific objects to modify output with Javascript, Javascript embeds into PDF output), better out-of-the-box styles, better documentation and support, and more predictable output and better debugging tools. Browsers are catching up on paged media options, but they're not all the way there yet. The rest of the stuff Prince does is not (and arguably shouldn't be) in the scope of headless Chrome. There was a brief moment where headless Chrome supported flexbox in print before Prince did, but that was fixed a month or so ago in Prince dev and should land in production soon if it hasn't already.
- ux-app 9y ago
  PrinceXML is in a league of it's own. Very, very light weight. Very fast and it has outstanding output. The price tag is steep for sure, but if your business relies on PDF output then nothing comes close.
  - _pmf_ 9y ago
    Do you use it in the context of technical documentation? Does it make using Docbook a bearable experience?

lessclue 9y ago

One word -- wkhtmltopdf

reagan83 9y ago
I've used wkhtmltopdf for years and it's really great. However, having a browser (headless Chrome and now Firefox) render the page closes the gap between what we build in HTML and what we want to output in a PDF, without having to deal with nuances of the wkhtmltopdf rendering engine.

_e 9y ago

It just hit me why people continue to ask for headless browsers to be able to print to PDF -- for reports! To get better control of the print job, do you ever use Adobe InDesign?