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 :).
Related
i am hosting a website on hostinger and whenever i do a change in the CSS file it reflects the changes on some of my website users while it doesnt change for others, i figured it might be because it gets cached for some users..
I tried to add the "?v=1.0" at the end of the CSS file link to try to get the browser to reload the file for the users but there was no changes. Then i tried to change the WHOLE name of the CSS file and it worked for SOME users but still not for everyone. I tried to add CONTENT="NO CACHE" and it had no effect either. I also noticed that most of the problems are for users using Google Chrome..
Here is how i normally link my CSS file:
<link href="nav.css" rel="stylesheet" type="text/css" />
What i am looking for is that whenever i do a change in my CSS file it would get reloaded for all users and not stay on the old cached version since i dont want nor will it be effecient to ask users to clear their cache every time i make a change.
I'm unsure why versions don't work, so maybe someone more experienced can pitch in on that, but in the meanwhile you can use something like:
<link href="style.css?key=<?php echo time(); ?>" type="text/css" rel="stylesheet" />
This will, however, force the user to load the css upon every single visit to the site and affect your sites performance, so remove when the site goes live.
Try to "Empty cache and hard reload" in the webbrowser. (CTRL + F5 in your webbrowser)
In my Angular app, my menu component html code is displayed briefly when the page is loading. Even if I hide the menu html root element with a display none css, the html is still displayed when the page start loading.
I have read a lot of thing about ng-cloak (https://docs.angularjs.org/api/ng/directive/ngCloak) but it seems Angular 4 not have ngCloak.
So I don't know how to prevent this unpleasant effect.
does Angular 4 have an equivalent directive for ng-cloak?
How can I display properly page without display unstyled html on load?
The index.html file should not contain any application specific HTML code. But just some headers and the root tag of the application. It may contain a placeholder text like "Loading" inside the root tags.
All the html code of the application should be inside the app.component.html and or other components.
#angular/cli generates an index.html "template" file that looks like this:
<!doctype html>
<html>
<head>
...
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
The browser immediately displays the "Loading..." text. After Angular was initialized, it is replaced with the actual application. To get a white page, just removed the text.
I would have gone with #HendrikBrummermann's answer: place a "Loading..." tag.
From your comment, "...which component includes the header... the unstyled html of the header is displayed", I believe you already have your answer: there is no CSS loaded that can style the HTML of the header yet.
Hendrik's answer keeps the tag to a minimum, so this effect is not apparent.
If you really need to style the header immediately, I fear that you need to use an inline style (and with no images or fonts - those won't be loaded yet either). Keep that to the bare minimum is all:
<!doctype html>
<html>
<head>
...
<style>
...
</style>
</head>
<body>
<app-root>(styled header)</app-root>
</body>
</html>
Then upon loading you can remove the placeholder.
You can also try (but it's messy and difficult to maintain) an incremental approach with two "loaders": a very, very minimal one that needs next to no CSS/images, then as soon as the fonts and other very few basic assets are onLoad'ed you can maybe replace it with a simple animation, and from there you load all the rest and activate the full Angular app.
There are also "packager" utilities that will compact most of your HTML, CSS and JS into a single minified SPA bundle; some of them (I'm sorry, I saw a couple of them used, but never used myself and can't reference them) also supply a minimal loader as described above. This might take care of some maintenance for you, and it's perhaps worth a shot. I know this because for one project a colleague of mine had to replace a Flash "Please wait" loader with a HTML5 one (it wasn't an Angular project, but I don't think it matters).
Those are things which you could give a try:
(In my opinion best solution) You can use Angular Universal, for serverside rendering. Workflow is:
User sends request to example.com
Server is not responding with pure HTML (example above), but runs Angular on the server side and render output HTML
This HTML (together with <script> tag pointing to compiled app is send to users browser
On the first look, the user sees HTML + CSS formatted by his browser. Then browser launches *.js file, and after a while replace "static page" with "single page app"
Angular can deal with all action done on "static page" (before JavaScript launch), thanks to BrowserModule.withServerTransition(); More about Universal can be read here.
You can make one step further from Universal, and serve your Angular Universal App as a Progressive Web App (PWA). More about PWA can be read here
Go one more step further, and introduce Accelerated Mobile Page (AMP), from the Google Cache. More about AMP can be read here.
You should never ever place anything more than application root node in your index.html:
<!doctype html>
<html>
<head>
...
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
If you really want to have something "nice" while the user is waiting for Angular, you could create some kind of loader with ie css animation:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="loader.css">
</head>
<body>
<app-root>
<div id="css-loader"></div>
</app-root>
</body>
</html>
Regarding points 1 & 2 & 3: Here you can find an example of Angular Universal & PWA & AMP combined.
I think this behaviour is inevitable. Best you can do is speed it up as much as possible. Using the lastest versions, AOT and lazy-loading helps a lot.
Alternatively you can add some css to your index.html
This is a feature, not a bug.
You can do one of twothree things:
Let UAs get information as soon as they can and assume people can tell when things are loaded fully, or
Make people wait for information, and show it to them only after it has all loaded
Some kind of absurd gray area unicorn implementation that ensures part of the page is loaded before displaying it but doesn't bother for other parts
Historically, #2 has been the most derided approach, especially as so many people want to do it. I suggest not even pursuing it.
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 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() ;)
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.