In my PHP based admin panel, I've a button "Print Message", which print a receipt table. Currently I've no printer so I am saving this receipt as PDF (using 'save as pdf' option from print section in chrome).
I want to change the font-face and font color of this PDF document. I've tried several options like
- Inline CSS on target table.
- External CSS file with media="print" attribute.
- #media print{} media query.
but nothing worked for me.
When I am using the system installed fonts, its working and showing result on my system but when I am using attached font using #font-face, its not working.
I hope someone here can help me.
Thanks.
Have a look at PrinceXML.
It's definitely the best HTML/CSS to PDF converter out there, although it's not free (But hey, your programming is not free either, so if it saves you 10 hours of work, you're home free (since you also need to take into account that the alternative solutions will require you to setup a dedicated server with the right software)
For more info look here: https://stackoverflow.com/a/434827/4958186
Related
I'm using Wordpress to manage a newsletter with IssueM, also I need to be able to export the content of a group of articles to PDF (Keep in mind that I'm not a php hardcore developer).I'm using Advanced Custom Fields to generate some data and then creating graphs using NVD3 with javascript.
At this time, all the plugins I found to create PDF's did not work, they only "print" the title of the post(article in IssueM) and nothing else.
I need to be able to export the content, rendered graphs and tables with images, to PDF as they appear in the browser (styled via CSS in my page).
I found there is FPDF, and mPDF, also DOMPDF but they don't specify if they can render the javascript output (which are my NVD3 rendered graphs) to PDF.
Is there any tool that can acomplish this? or,
Do I have to do this by hand? If that's the case, can you tell me an approach?
Have you had a look at:
https://wordpress.org/plugins/printfriendly/
You should be able to add/remove/customize elements that print out:
http://support.printfriendly.com/publisher/developer-questions/include-exclude-content/
It should render javascript because it is using javascript (make sure you enable javascript use in the plugin):
http://support.printfriendly.com/publisher/wordpress/javascript-option/
Hope that helps!
In my project, users can write books online and save it as a epub file. I need to implement a functionality which enables the user to see the preview of epub file. There will be two tabs in preview page. One is for kindlefire and other is for ipad. I have saved all the datas (XHTML, css, content, etc) of epub file in the database. The preview should give the exact look of the book in kindlefire and ipad. Is it ok to use normal html and css to generate preview of book ? If there is any other straight forward method for this, please suggest me
I think that you shouldn't aim for the EXACT look on those devices, instead just view the html and css (of course, test it on those devices anyway). People usually don't mind if there are small differences like gaps or paddings somewhere, the main thing is text anyway. Unless, of course, you have difficult tables and media content.
I'm printing a page of my PHP application with the ( ctrl + P ) (default printing). How can i make sure that the CSS (tables, padding, cellspacing, background picture with opacity) are printed along on the sheet. I'm calling the CSS from another file.
Thanks for your help and time.
You must add this
html{-webkit-print-color-adjust:exact;}
To any css file of the project, ideally the print one, as the others won't load when printing. It will force chrome to use every background color and image exactly as coded.
Add this to your HTML page. Now you need to adjust your page manually, for fitting it to the print page. (use the preview function in Chrome)
<link rel="stylesheet" media="print" href="print.css">
The interesting part for the browser is media=print
You can find some more style commands for printing web pages here:
CSS How-to: Optimize Pages for Printing Using CSS
Printing a Book with CSS: Boom!
complete css guide - Printing
CSS Paged Media - #page Rule
You will need to include a print stylesheet, as detailed by Dan Lee. However that's only half the answer. The other half is that Chrome (and Safari) have poor printing options, and cannot print background-images, or background-colors. I had to figure this all out when trying creating a printable version of FullCalendar that used colors to differentiate between different types of calendar entries.
I include these directions for printing:
Firefox has the best print output, Internet Explorer is second.
You may want to turn on the Print Background option in your browser: In Firefox or Internet Explorer: Go to File -> Page Setup -> Check Print Background (colors and images)
Although Chrome and Safari will work, they do not have the print background options. It will be difficult to differentiate between the types of entries on the calendar.
If your page is simple enough, you can sub in actual <img>s instead, and use CSS to stretch and position them behind any text that might be in the div or td. That wasn't possible for the FullCalendar project I did, but it works fine on a simpler table. It's compatible with Chrome, Firefox, and IE, and doesn't require users to toggle a specific option to get the correct output.
This is as of Chrome 17.0.963.83 and Safari 5.1.4 on Windows.
I do a lot of tutorials using Wordpress. The main characteristic thing is that every tutorial has a lot of screenshots. Not just whole screen shots, but fragments of screen important for explained part of tutorial. In my work i do mostly website parts screenshots.
I usually do it like this:
- press PRINT SCREEN
- open Irfan View
- paste whole screen capture
- crop part i need
- save it do disc of my computer
- click "add image" in wordpress
- choose the image from disc
- voila, one image is added to post
And when i write 1 tutorial post i do it like 20-30 times...
So my problem is that it takes like "A LOT" of time.
And search some plugins to help me with this work. I use Firefox, but have also Chrome and Opera. I've found "Light Shot" plugin for Firefox. It' basically gives you option to select part of webpage and save it to it's website or clipboard. But unfortunately you can not embedd the image from their server in wordpress.
So i pasted clipboard images to blog post. But when i do this images are embedded as inline images. It worked for short tutorials. But when i saved tutorial with 5 images Wordpress cut it in half and saved only half of my post.
And even if i would fix it somehow i dont want to have inline images, because it would kill my server performance and you can't share the image in other posts.
So i thought i ask you guys if you know any solution to make screengrabbing to Wordpress easier. Maybe there is ready solution I didn't know before.
UPDATE:
Light Shot can take cropped screenshot to clipboard. So what i would need now is a extension or application that can upload image from clipboard to Wordpress gallery. Do you know any?
There are a few services that do this for you, such as:
http://www.websnapr.com/
This site lists three options:
SnagIt with autoexport - images go into a new post. $50
http://www.techsmith.com/snagit.html
PicturePaste - Free for 50 pictures. $10 if you host on your own server. $30 to use their servers.
http://www.attacat.co.uk/brain/add-screenshots-to-wordpress-org#axzz1hwPOygFu
best solution i have found is SPGrab
there was one ff extension that was very promising - it seems to have dissapeared :(
https://addons.mozilla.org/en-US/firefox/addon/screen-grab-to-wordpress/
UPDATE: Light Shot can take cropped screenshot to clipboard. So what i would need now is a extension or application that can upload image from clipboard to Wordpress gallery. Do you know any?
There is now a free Wordpress plugin called Image Clipboard. It allows you to paste images from the clipboard directly into Wordpress posts using Ctrl-V.
I use it in combination with LightScreen, which is a screen-grabbing tool that supports capturing arbitrary regions of the screen.
i want to open PDF file in a iframe OR windows Extjs
and let user click to add labels
what scripts can i use ?
im coding with Extjs / php /mysql
i use fpdf/fpdfi libraries to write on a PDF file
any idea ? help please
thank
Simply pointing iframe to PDF file only works when user has allowed it's web browser to embed Adobe Reader (I'm not even sure that other PDF-readers support this at all). This might be the common configuration for IE users, but in other browsers and especially on other OS-es it's not as common.
Another option is to use a service that renders your PDF as web page. For example using google docs it's dead easy:
<iframe
src="http://docs.google.com/gview?url=http://yourdomain.com/file.pdf&embedded=true"
style="width:600px; height:500px;"></iframe>