Creating a pdf of react component - javascript

I've for the last month trying to add my react component into a pdf without showing it on the screen, with no luck.
I've exhausted everything I could find on SOF, such as HTML2Canvas which can't be used in my case since the component have to be rendered before one can convert it to canvas and add it.
It does not have to be in the client.

Have you seen the print media query in CSS?
You can do
#media print {
/* Your CSS */
}
You can use this to hide a component with CSS on the normal page but then when it comes to printing you can make that component visible. The component will always need to be on the DOM though.

If you're just trying to have users print your page to pdf using the print dialog, then GavinHenderson5's answer should be sufficient. If you need to actually produce a PDF file that users can download, then a combination of GavinHenderson5's solution with something like Headless Chrome may be preferable.
We have a backend endpoint setup that has a running Chrome instance that then calls a URL on the frontend (rendered React components) printing it to PDF. Using print media queries, you can double dip any styling of the components or display: none/block; if you want to pick and choose for the rendering.

Related

Somewhat complex page to PDF (html, css, react)

I got a somewhat complex page I need to output to PDF format without forcing the user to use a print preview type screen to "Save as PDF". It's a Laravel web app that has a dedicated page formatted to be printed, but I need to generate a PDF without having to show the page. It uses bootstrap, css, a highcharts.js chart and a react component (already bundled).
Does anyone know of a way to turn this into a wysiwyg type PDF? I think I mainly need something that can take html, css, and js and be able to generate a PDF out of it but I haven't found anything.

HTML to PDF Javascript (Angular)

I am using Angular 8 and have pretty styled HTML that I want to implement a "print to PDF" functionality. I looked into just "window.print()" but it doesn't sound like I can get rid of the default header/footer on the browsers programmatically. I wanted to know if anyone knew a good way through Angular/JS to generate a PDF with this styled HTML?
window.print() won't print to PDF by itself, it will simply invoke the print dialog, from which you can pick a destination printer, which could include a physical printer or a PDF printer software you may have installed.
If you are happy with that solution, and your only concern is that headers and footers are being printed, you should make use of CSS media queries. CSS media queries allow you to specify different styles for on-screen display vs. print on paper (and other cases).
In your stylesheet, assuming your header and footer elements are called just like that, you can do:
#media print {
header, footer { display: none; }
}
You can also make them styled differently (e.g. slimmer) instead of hiding completely.
More info: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
With angular 2
pdfmake :: pdfmake
pdfkit :: pdfkit
For Angularjs
You can see this tutorial in MEDIUM (pdfmake)

Inject an html table into an image available as an ArrayBuffer

Basically I want to go from here (available as an ArrayBuffer):
to here: (also available as an ArrayBuffer)+
So it's
ArrayBuffer -> Image -> Image with overlay -> ArrayBuffer
in javascript only without showing anything to the user.
If possible, I want to generate that table using html (still without showing anything to the user).
I had that idea of displaying an invisible Chrome Appwindow to render the page with the image as its background just to export it using the html2canvas library.
However, there has to be a better approach to this ...
Does anyone have an idea of how to implement such a functionality?

PDF.js How do you print a multi-page pdf?

I'm trying to add print functionality to a multi-page PDF embedded in a web page that is using the PDF.js library. It's problematic because I only have one page rendered at a time when a user is viewing it and the page is really rendered as an image in a canvas element.
This question does not help in this case because it is for a single page PDF where printing the current contents of the canvas are acceptable. Same with this question. I also want to avoid just opening the PDF in another tab/window and telling the user to print it themselves, which defeats the purpose of embedding it into the page.
Looking through the documentation from Mozilla, I haven't found any native functions that will just print the PDF, however, I will start playing around with the renderingIntent which seems like it can be set to 'print'.
EDIT:
redingIntent doesn't seem to affect anything and the PDF stills renders the same way whether it is set to 'display' or 'print'.
Remember PDF.js is just another web page. ATM, at least not in the standard HTML5 APIs, there is no way for a web page push random information directly to printers (but you can push it to the cloud printing service) -- you can print only what you "see". "See" means what's in the DOM, and currently CSS can be used to hide information for the screen or printer. The DOM can also be changed the beforeprint/afterprint events.
In you case, since your PDF view in embedded, you need to fake DOM to have all PDF's pages/canvases on the main web page, make them visible for print and hide for screen (see e.g. [4]). Few different problems needs to be solved too that might be off-topic here: removing margins and non-rasterizing canvas. Firefox is dealing with those via moznomarginboxes [1] and mozPrintCallback [2] -- both are created in support of PDF.js and not supported by other browsers. (See also polyfill for the latter [3])
[1] https://bugzilla.mozilla.org/show_bug.cgi?id=743252
[2] https://bugzilla.mozilla.org/show_bug.cgi?id=745025
[3] https://github.com/mozilla/pdf.js/blob/master/web/mozPrintCallback_polyfill.js
[4] https://github.com/mozilla/pdf.js/blob/master/web/viewer.css#L1759

Export HTML/CSS flyers as image or pdf to print

I'm creating a web based flyer designer for dog walkers to customize flyers to print off. It's very basic and uses jQuery to change the contents/text of a DIV to what they want on the flyer...
My problem is how to let them print the flyers. Ideally, they want to choose between 2 or 4 flyers per A4 page. Or to export as pdf or image to take to a printer. I've looked into exporting html/css as a PDF or image but can't seem to find anything that suits the situation.
Any help is appreciated.
Thanks
Webkit HTML to PDF\Image should do exactly what you want:
http://code.google.com/p/wkhtmltopdf/
I would recommend using the print media type in the main stylesheet:
#media print
{
/* style sheet for print goes here */
}
Or, separate the print styles in it's own stylesheet:
<link href="foo.css" media="print" rel="stylesheet" type="text/css" />
This allows you to define custom styles that are displayed when using the browser's Print dialog (File->Print...). That way, your end-user can print to their printer, print-to-PDF (or Microsoft XPS Document Writer), or whatever else they want to print to, without relying on a 3rd party library that, from past experience, is subject to quirks and inaccuracies in converting CSS styles.
You have loads of options... here is just one, in case you want to export your webpage to PDF without much work:
Recommendation? for our specific HTML -> PDF project
Just for more options, there's also phantomJS, which uses webkit rendering engine as well. QtPDF is the pdf engine it uses behind the scenes
http://phantomjs.org/
This assumes you have a server that you can execute command line scripts off of. Ive used this recently in a project, and it works great for converting HTML->PNG. Have not personally tested the PDF functionality extensively.

Categories

Resources