How can I print a receipt sheet "800 mm width" via my web application?
I tried many times but can't get a cross-browser support for this feature,
for example, Chrome shrinks the page and print a "blurred" text on the receipt, but Firefox just print the right side only of the page "magnified, as if it was an A4 page".
also, after some searching there's no specific solid code to use.
so, what's the best practice to follow in order to enable receipt-printing on our web applications?
Thanks!
Can't post the receipt picture because I'm new here :)
I solved this issue with two actions: i) Table column set to 350 width. ii) Use a css just for printed output. For example, one css file to web display and a second css file that must be invoked just by scripts whose action is to print something.
Also when calling the css stylesheet use media="print" in the same <link href=....>
Related
I am creating a html page based on the data coming from Database and then converting it to pdf using dompdf. I know about page-break-after in dompdf and is able to use it shift the content to next page by using a if condition in php like this
if($count_row > 7)
{
$html = $html.'
</table>
<br/><br/>
<img width="1640px" height="30px" src="bottombar.png" />
<div style="page-break-after:always;position:relative;">
</div>';
}
Everything works fine.
But, now I want to break the page dynamically. Depending on the height of the table after content is entered in each row, if the next row will spill over to next page,then break the page add some headers and add next row.
Since the content coming in each row is dynamic, there is a chance that one page might contain 10 rows, another 15 rows. Hence I don't want to restrict the row limit as I am doing now.
Is there a way I can get height of the page after each row is added in dompdf or from php. I know it can be done in JS but is it possible to do in php.
Also I know the page size, since I am setting it manually.
$paper_size = array(0,0,1300,1300);
$pdf->set_paper($paper_size);
Any help is appreciated. Thanks in advance.
I was working with this library and it always was giving me this kind of issues. What I'd recommend to change for phantomJS.
PhantomJS is a headless WebKit scriptable with a JavaScript API. It
has fast and native support for various web standards: DOM handling,
CSS selector, JSON, Canvas, and SVG.
it will allow you to put rendered content and save it as PDF
http://phantomjs.org/screen-capture.html
Usage example: https://coderwall.com/p/5vmo1g/use-phantomjs-to-create-pdfs-from-html
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
From last 6 hours trying best to show progress bar wile pdf is generated in TCPDF but not successful.
I am using TCPDF API for HTML to PDF generation, But the problem is that while generating the PDF we can't use custom javascript, Can we show progress bar while PDF is generated?
Any idea please?
I am not sure why you say "can't use custom javascript". If you just want a "loading icon" yoy should do this
- show loading icon (from js)
- ajax request to php file that generates the pdf into a server file
- on success you get a link to a generated pdf.
(for this solution you might try some estimation based on how large would be the generated file)
If you want an accurate progressive, you should add some estimation on php file. Let's say when you generate the pdf you know how many pages you will generate and each "addPage" command you save the status of completeness in a file or a memcached key. On you JavaScript side you call a file each second that reads that status of completeness.
No.
Even if you were able to use custom javascript, it would not be possible to get an accurate prediction of the time it will take to generate the document and therefore diplay progress - but it would be possible to get an estimate (based on extensive benchmarking). But in order to display the progress bar you'd need custom javascript and to change the processing to decouple the threads on the browser and server. This is discussed more in this question (which IMHO is not a duplicate of the post referenced).
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.
What I'm trying to do is load a website on a frame and then mark points on it depending on screen coordinates obtained via a function.
Do I need PHP GD?
Loading the website on the frame is not an issue. It's how to mark points on the screen that's causing my hair to fall
Nah, what you need are absolute positioned HTML elements.
You can grab the page with PHP with curl or file_get_contents() and inject some HTML/CSS into it that creates absolutely positioned <p>s or <span>s or whatever.
Checkout this post here. It uses Mootools(a JavaScript framework), PHP, and MySQL. I think it's very similar to what you are trying to do except you want to mark points on the iframe instead of doing it on an image. The plugin can be attached to an element:
David Walsh's Mootools Heatmap