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)
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'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.
I went ahead and downloaded http://platform.twitter.com/widgets.js
And the http://platform.twitter.com/embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css
Two files the embedded timeline widget uses.
All I'm trying to do is customize the css of the widget, and since twitter only gives you a few design options like link color and a dark/light theme, I thought it would be easier to download the files and modify them myself.
Only problem is, I'm having some difficulty trying to point the css file location inside the widgets.js to the copy on my webapp
A line inside widget.js, locating the css file on twitters servers, its tied up with some variables that combine a prefixed platform.twitter.com/ value or something
provide("tfw/assets",...{"default":"embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css",
I don't how much editing has to be done to widget.js but my guess its only a couple lines?
If anybody proficient in javascript wouldn't mind taking a look and telling me "Not worth the effort", or "It's simple, just change __ to __", let me know.
widgets.js is the first hyperlink above
(See my edit below for a better solution) This seemed to work for me and doesn't take much time to implement:
In widgets.js, find
function Z(a,b,c)
Change this in function Z:
d.href=twttr.widgets.config.assetUrl()+"/"+b
to something like this:
d.href=b
The assetUrl just gets the base URL of the file (eg. a CSS file), which is at a domain Twitter owns. b will be the paths you specify throughout the JS (such as embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css ). Upload all the CSS (like timeline.xyz.default.css) to where you want it, then you can customize those files and keep them on your own server. You can't modify the CSS by simply adding rules to a CSS file on your server, since the Twitter feed is in an iframe from a different domain. Modifying CSS in iframes with this type of source (ie. not from your own domain) is not allowed, to prevent hijacking-type problems, but if the iframe refers to a CSS on your own server then you can modify things.
There may be some other things you might want to check out to make sure you have all the required files. You should also get sprite.png which is referred to in the Twitter CSS file. I was able to customize the CSS this way and it worked fine.
Edit:
I had problems with the above solution in IE7/6 and Chrome in Jelly Bean so found a better solution that lets you inject your own custom CSS file into the iframe while sticking with all of Twitter's CSS at their own domain. From a fresh widgets.js I went and added the following:
;d=c.createElement("link"),
d.id="custom-css-1",
d.rel="stylesheet",
d.type="text/css",
d.href="http://mydomain.com/css/timeline.custom.css";
c.getElementsByTagName("head")[0].appendChild(d);
immediately after
c.getElementsByTagName("head")[0].appendChild(d)
on the line in widgets.js starting with
provide("tfw/widget/timeline"
(again in function Z) This seems to work much better, and all you need is a copy of widgets.js at http://platform.twitter.com/widgets.js.
It looks like if I download wigdet.js and custom.css then widget does not pick up
data-chrome="transparent"
I downloaded
http://platform.twitter.com/embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css
renamed it timeline.custom.css
Changed in wigdet.js link to my css
function b(e,t,n){
var r;
n=n||document;
if(n.getElementById(e))return;
r=n.createElement("link"),
r.id=e,r.rel="stylesheet",
r.type="text/css",
r.href= "../css/timeline.custom.css",
n.getElementsByTagName("head")[0].appendChild(r)
}
Is link to css correct? Or twitter uses the newest version of css?
http://platform.twitter.com/embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css
How to make widget to pickup the data-chrome="transparent"
I used widget script
<a class="twitter-timeline"
data-dnt="true"
href="https://twitter.com/search?q=%23My_hush"
data-tweet-limit="1"
data-theme="dark"
data-screen-name="some_name"
data-chrome="noscrollbar noheader transparent noborders nofooter"
data-widget-id="My_id">
Tweets about "#My_hush"</a>
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.
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.