I am looking to create a product ordering and invoicing system using PHP/MySQL. I am currently doing this in Microsoft Excel, purely because I can easily print out what's on screen and I know exactly what the output will be before printing.
Can the same result be acheived with a web-based system? For example once an order is complete, I want to be able to print out the invoice with everything within the width of an A4 page.
Is it simply a case of just specifying width properties on the tables? Also will I first need to load up a printer friendly version of the page or can I just click on a "Print" button which automatically prints out the printer friendly version?
in CSS you can specify the "PRINT" version of a given class, so that when the user goes to print the page from the browser it formats differently than how it is displayed in the page.
Take a look at this: http://webdesign.about.com/cs/css/a/aa042103a.htm
you can:
1. click on printer and use another template for printable version
2. use <link media="print" rel="stylesheet" href="print.css" type="text/css">
this CSS will be used for print version only
3. to print use $(window).print() ;)
Related
I'm trying to forbid users to save my website's content as pdf but I still want to allow them to print the content.
<style media="print" type="text/css">* { display: none; }
The above css style hides all content so when user hits (ctrl+p) it doesn't display my content which is good.
But is there a way to only display my content when user tries printing and then if user tries to save as pdf display nothing?
Thank you,
You can't. Most operating systems implement "save as PDF" as part of the print workflow -- there's no distinction from the perspective of a web page.
As an aside, your CSS isn't going to be an effective way of preventing users from printing your content either -- if normal printing doesn't work, they'll find a workaround like taking a screenshot of the page, or copying its text into a text file.
HERE there is a page that maybe the visitors would print. If you try to print it's a mess. I know that there is proper media queries to do that but I think it takes a a lot of work.
So my question is this: is there a way to open a external/existing PDF when I decide to print the page? I mean when I click the print botton of the browser, not a custom botton on the page.
Thanks guys :)
I think it is impossible to do this that way. But really, don't be afraid of media types.
Here are some ideas:
1 - BEST) Style media = print: http://www.w3schools.com/css/css_mediatypes.asp
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>
And Use another style sheet for printer media. This is the best solution, and this style can be really minimal.
2) Use some kind of converter (html to PDF) and convert each page that You want to 'be printable'. Then place Print icon somewhere on the page which is the link to pdf version. You can also map CTRL + P using JQuery for example, and run download pdf dialog.
It is not a good solution in my opinion, every new page = total mess and converrting, and... Not worth. It should be done automatically.
3) I don't know what kind of files are U using, but if it is simple html, U can run bash script using PHP that converts the page using for example html2pdf converter on the fly. Then, U can make the printer friendly version icon, and redirect someone to a php script which make pdf and display it. But here also You need a new icon, and File print doesn't work.
So the solution 1 is the best I think...
Hope it helps :)
PS. Media types are not so time consuming. You make only few changes. Navigation display hidden, font size, img display and that's really all. And You can do it once. Converting must be done multi, multi, multiple times :). If You have any questions about 2, and 3 solution write, I can help to make a sketch of them :).
I'm working on a small part of a large web site. I'm having some problems with the print version of a page, which uses <css media="print">. I wonder if there is a way of displaying the print version of the page in the browser, so that I can inspect it and find the errors.
If you have a style sheet set to "screen" and another one set to "print" you could temporarily change the "print" one to also be "screen".
The extension Web developer (http://chrispederick.com/work/web-developer/) has a display print style function that may help you.
I think you have to create another page which is optimized for printer (printer friendly page), and Just add $(document).ready(function() {
window.print();
});
Then change the link to the 'print' button to this new file.
As we all know normally we call background(Div background, table background etc...) color or images from css but when we check same page as a print preview those properties does not appear.
Is any one know how to fix it?
Thanks
AV
By default these aren't displayed, however the user can change the settings of this in their browser:
http://support.microsoft.com/kb/296326
http://malektips.com/firefox_0026.html
this will be useful as it explains how you can use a print css to display some items when printing: How can I print background images in FF or IE?
Background-colors are disabled in the print preview of some browsers to be more economic and save ink.
I'm not sure, but declaring them explicitly in the print-css could help (Declare mediatype print for that):
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
In every case, the user can configure his browser to print the background-colors.
Those properties don't appear in print-preview because printers don't print them. So you're seeing it how it will get printed out.
There is no way for you, the developer, to fix this.
the end-user, depending on the browser s/he uses, can edit his/her printer options in the print dialog to get this to print out, but you cannot control that.
I am somewhat new to web development, so I'm not sure how "stupid" this question is, but I couldn't find much when searching, so I wanted to ask.
I am creating a page that, when a user presses an Export button, it exports a snapshot of the site as a PDF. The PDF library takes a URL. That works well. However, I want this page inside a larger site. When I print, however, I don't want the larger site to be printed. Is there a way to supply an "internal" HTML address so that my web page can still be accessed. What should I look at to do something like this?
Thanks.
The best way to "hide" the rest of the page when the user prints a web page is to create a print stylesheet and include it in the page header like this:
<link rel="stylesheet" type="text/css" href="print.css" media="print">
Then simply hide the elements of the page that you don't want printing in your print.css file.
I'm wondering if by "larger site" you mean the template surrounding your content. Is that true? If so, a common approach is to provide a parameter that can be added to your request, like print=1, which would suppress the outer template when delivering your content.