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.
Related
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.
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)
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.
When printing an HTML document the bgcolor of a table cell is ignored.
What else is ignored when one tries to print documents?
I'm trying to make a particular website look a certain way when printed out but am having some difficulty doing so not knowing what attributes printers use and which ones they ignore.
Thanks!
The link you're referring to is about browser-specific print handling. Check out the each supported browser's printing properties for more info there.
Regularly, though, WYSIWYG when it comes to printing an HTML page.
You could specify a specific CSS file for printing by adding the following tag to your <head> tag:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
Where print.css is the path to your CSS file.
Addition:
Though you can't override the Browser-preferences, there's nothing you can do to print your BG in non-allowing browsers. Check the printing preferences for those options.
My best idea is to export your web-page to PDF and print that. See web2pdfconvert, for example of such a service. You could also install a plugin on your server side that does exactly the same thing, and the send it your HTML via AJAX.
Another Addition: Take a look at jsPDF which is completely client side and thus simpler. You can use it to convert the page to pdf and than print it as it is.
Things that may be ignored are completely dependent upon the browser in question and the print settings for that browser.
For example, in Chrome you can turn off headers/footers and backgrounds. In Firefox you have control over backgrounds. In IE you have some refined control over frames, linked documents and optionally printing a table of links.
Your best bet is to simply provide a style sheet for media="print" and define how you want the page to look.
Has anyone ever found any lightbox type javascript / css code that can display PDFs? I have tried many libraries and none have worked for me. The environment needs to be IE6/IE7 compatible.
I am looking for something similar to this:
Lightbox 2
http://stickmanlabs.com/lightwindow/
Specifically, check out the demo "Flash Paper" for embedding PDFs
Good luck finding anything that will display a PDF in browser without a plugin.
You might consider embedding an IFrame that points to the PDF in a lightbox style. That's about the best you'll be able to do, though.
To sum up your options:
If a screen-shot of a portion of the PDF is good enough, then as tomlog answered, you could find a library or existing code to extract said portion as an image, and display that image in the "lightbox".
If, however, you need actual PDF-viewing functionality, it can not be done in IE6/7 without loading into an Adobe Flash/swf object, or contained within the official Adobe Reader browser plug-in somehow.
Going the plug-in route, you will have to use an iFrame.
If the Flash/embedding approach seems better, jvenema suggested http://stickmanlabs.com/lightwindow/ which has a "Flash Paper" demo (Flash Paper is the official way to embed PDF documents) you could check out, or embedding something else, as seen at http://www.scribd.com/ and others.
artViper's bumpbox
Bumpbox 2.0 a lightbox clone with support for PDF, flv, swf, audio, images, inline HTML and remote html files. Now also plays
Youtube© & Vimeo© videos directly out of the box!
If it's not here, it's not anywhere: lightbox clones
You have a couple of solutions here
You could embed the PDF in an iframe (in a lightbox or panel) like http://www.cs.tut.fi/~jkorpela/html/iframe-pdf.html
Otherwise you could upload the PDF to a document sharing site like Issuu and embed their swf in your web page.
If you can find a PDF library that allows you to convert each page to an image (JPEG, GIF or something), then you could display those in your lightbox.
Obviously you would lose all the zooming and paging functionality of the PDF.