Hi i'm making a web based POS and when printing the ticket I use javascript
window.print()
But I have buttons for going back to the main page, ando I dont want those printed on the ticket, Can I print only Text from a Browser Window? If so how can I do it?
Also Im new at this, so if there's a better way to do this I will appreciate commments about how to do it
tx in advance
Add a print stylesheet that hides everything you do not want to be printed:
<link rel="stylesheet" type="text/css" media="print" href="print.css">
In this stylesheet you could e.g. hide all images using img { display: none; } or do something more fancy such as replacing colors with black/white etc.
You should look into building a print stylesheet.
Here is a guide to how you produce a print stylesheet:
http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml
You need a stylesheet like this:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
Related
I have been trying to hide title and link tag using internal css, but it is not working.
<link rel="shortcut icon" href="./favicon.png">
<title>app · Streamlit</title>
I wanted to hide these two using css or js, Any solution?
CSS cannot touch the browser chrome. It can't change the favicon or title in the address bar / browser tab / window title bar.
It can only affect the document in the viewport.
There is nothing that you can do with CSS.
<title>app · Streamlit</title>
This is how you could set an empty text:
document.querySelector('title').innerHTML = '';
Or you could also remove that tag:
document.querySelector('title').remove();
<link rel="shortcut icon" href="./favicon.png">
Removing the value ./favicon.png will not help, so you will need to set an empty icon:
document.querySelector('link[rel~="shortcut"]').setAttribute('href', 'data:image/x-icon');
I'm developing a pdfviewer in Angular 5. My html page looks like this:
pdf content is showed using canvas element. Below snippet is for print button.
<button (click)="print()" title="Print" >
<span data-l10n-id="print_label">Print</span>
</button>
print(){
window.print();
}
When I click it is printing whole page right now.Like bolow:
I want to print only pdf content instead of whole hmtl page. Is there any way to do that?
Thanks inadvance!!
You can add a css file which is for printing the webpage
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
In this css file you can hide the elements you dont want to show while printing.
or you can hide the element before printing not recommended
UPDATE
Since its an angular application on your css file you can mention like this
#media print{
.no-print{
display: none;
}
}
and then you can add no-print class on each element which you do not want to print.
I am having some dynamic content that should be shown only in the printing page and not in the web page using CSS or javascript.
Please help me to do this.
For example;
I am having a div content like this..
echo '<div id="noshow">'.$val.'</div>'; //i am using php and $val is a dynamic value.
I need to show this value only in the printing page and not in the browser page. I used display:none. But, I don't know how to make it to display again in the printing page.
In you're regular stylesheet you could use #media queries for your print css...
#media print {
#hid { display: table-row; }
}
or you could add a print style.css to the head of your page with the media attribute.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>
You need to have two sets of CSS. One that is specifically around displaying to the browser and one that is for printing.
Look in to http://printstylesheet.dbushell.com/
Cheers
Truez
i currently have this code working on my website:
<script>
if (window.top!=window.self) {
loadCSSFile("http://www.website.com/css/iframe.css");
} else {
loadCSSFile("http://www.website.com/css/style.css");
}
</script>
I am looking to fix this as i want to load three files but only if required? hoping you use php or add to the script above, currently this loads normal Css and CSS for Iframe (Facebook Apps) and now i want to style the mobile css, but with one file mobile.css i need to add a file to the above or a php code that handles this?
Cheers!
If you to load a CSS to style for mobile devices you can use the following code. This will detect that the device is a mobile by looking at the screen size and if it matches then it will load the css.
<link media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="mobile.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" media="(max-width: 800px)" href="mobile.css" />
Please don't use JS for this.
I'm trying to put a print button on a web page that will print the page's contents except images. Any ideas?
You can use CSS to disable all images on your website only when printing.
#media print {
img {
display: none !important;
}
* {
background-image: none !important;
}
}
No need to use a button, unless you want to give people the option to print images or no images.
If you just want people to print without images (which is preferred most of the time), you can just use a print stylesheet.
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
Then add
img {display: none;}
You need a print style sheet. There are two options for that:
Reference a separate stylesheet with the following code:
<link rel="stylesheet" type="text/css" href="printstylesheet.css" media="print"/>
In that stylesheet, put the following:
img {
display: none;
}
Put the following in your main stylesheet:
#media print {
img {
display: none;
}
You could use a stylesheet for print media and make a rule like below..
img { visibility:hidden; }
...
<link rel="stylesheet" type="text/css" href="myprintstyles.css" media="print">
You could also use display:none as the image rule but this will not preserve the spacing and could completely change the layout of the printed page.