Hi I need to print a document without buttons.Can anyone please guide me to accomplish this task.
I have a button to print in button click onclick() event I have used window.print() to print those data .But In a print preview It shows the page including those 4 buttons.i do not want those buttons I need only those data.
for more information I have adde the image below
add a wrapper to non-printable stuff i.e buttons in your case. check below code :
<head>
<style type="text/css">
#printable {
display: none;
}
#media print {
#non-printable {
display: none;
}
#printable {
display: block;
}
}
</style>
</head>
<body>
<div id="non-printable">
Your normal page contents
</div>
<div id="printable">
Printer version
</div>
</body>
Hope it helps.
Use CSS #media print or a print stylesheet to hide the button when it is printed. That way it will be hidden on the printout whether the button is used to print or not.
<style type="text/css">
#media print {
#printbtn {
display : none;
}
}
</style>
<input id ="printbtn" type="button" value="Print this page" onclick="window.print();" >
Refer #media print
Additional reference
You can specify different css rules for printing. Either you can use the #media print {} scope like this:
#media print {
/* Add your custom css rules here */
input {
display: none;
}
}
Or you can specify an entirely different css file to use like this (if you want to change your black background and white text to something more printer friendly):
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
1 Give your print button an ID:
<input id="printpagebutton" type="button" value="Print this page" onclick="printpage()"/>`
Adjust your script the way that it hides the button before calling
window.print():
<script type="text/javascript">
function printpage() {
//Get the print button and put it into a variable
var printButton = document.getElementById("printpagebutton");
//Set the print button visibility to 'hidden'
printButton.style.visibility = 'hidden';
//Print the page content
window.print()
//Set the print button to 'visible' again
//[Delete this line if you want it to stay hidden after printing]
printButton.style.visibility = 'visible';
}
</script>
To simply print a document using javascript, use the following code,
print(){
let w=window.open("www.url.com/pdf");
w.print();
w.close();
}
Related
so I have this HTML code where I hide the body of the website using
<style>
body{
display: none;
}
</style>
<body>
<p>Something..</p>
</body>
but now I want to remove this using Javascript without giving the body an ID or a class. As a solution I've tried the following but it is not working.
document.getElementsByTagName("body")[0].removeAttribute("style");
Any help is appreciated. Thanks.
You can set document.body's display style property to unset:
document.body.style.display = "unset"
<style>
body {
display: none;
}
</style>
<body>
<p>Something..</p>
</body>
If you want to remove the style tags added in your HTML, you have to select it using document.getElementsByTagName and call remove method to its nodes.
Working Fiddle
document.getElementsByTagName("style")[0].remove();
body {
display: none;
}
<p>Something..</p>
If you want to set style to the element
If you just want to set the display style of body tag, you can do this with javascript using.
document.getElementsByTagName("body")[0].style.display
More Generic Solution
const body = document.getElementsByTagName("body")[0];
const targetStyles = {
display: 'block',
}
Object.entries(targetStyles).forEach(([style, value]) => body.style[style] = value);
body {
display: none;
}
<p>Something..</p>
What is the issue with your script?
document.getElementsByTagName("body")[0].removeAttribute("style");
This script selects the body tag from HTML and removed the inline style added to the body. Its will work for below template, but not for your requirement.
document.getElementsByTagName("body")[0].removeAttribute("style");
<body style="background: blue;">
<p>Something..</p>
</body>
I want to use office-ui-fabric with angularjs, so I am trying to use ng-office-ui-fabric.
In the following example, when the wide of the screen is limited, we can observe that the span (eg, 3rd, 14) are hidden. This is not what I want; I want them to be always displayed no matter the width of the screen.
Does anyone know how to make the command bar unresponsive?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.min.css" />
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.components.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngOfficeUiFabric/0.15.3/ngOfficeUiFabric.min.js"></script>
</head>
<body ng-app="YourApp">
<div ng-controller="YourController">
<uif-command-bar>
<uif-command-bar-main>
<uif-command-bar-item>
<uif-icon uif-type="save"></uif-icon>
<span>3rd</span>
</uif-command-bar-item>
<uif-command-bar-item>
<span>14</span>
<uif-icon uif-type="chevronDown"></uif-icon>
</uif-command-bar-item>
</uif-command-bar-main>
</uif-command-bar>
</div>
<script type="text/javascript">
angular.module('YourApp', ['officeuifabric.core', 'officeuifabric.components'])
.controller('YourController', function () {})
</script>
</body>
</html>
By default the text is set to not display in the css. Ie:
CommandBarItem .ms-CommandBarItem-commandText {
display: none;
}
Then they using media queries to only show those elements when the width is over 640px
ie:
#media only screen and (min-width: 640px)
fabric.components.min.css:6
.ms-CommandBarItem .ms-CommandBarItem-chevronDown, .ms-CommandBarItem .ms-CommandBarItem-commandText {
display: inline;
}
You could override their styles by supplying your own that don't use media queries and just be sure that your css loads after their css (so it takes precedence). ie:
CommandBarItem .ms-CommandBarItem-commandText {
display: inline;
}
Here is a sample app demonstrating this. Note that I had to add the styles in the head tag inline in a style tag b/c of how the inline editor loads its assets. Normally you would just load your own custom css in a link tag (make sure its loaded last).
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.min.css" />
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.components.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngOfficeUiFabric/0.15.3/ngOfficeUiFabric.min.js"></script>
<style>
.ms-CommandBarItem .ms-CommandBarItem-chevronDown,
.ms-CommandBarItem .ms-CommandBarItem-commandText {
display: inline;
}
</style>
</head>
<body ng-app="YourApp">
<div ng-controller="YourController">
<uif-command-bar>
<uif-command-bar-main>
<uif-command-bar-item>
<uif-icon uif-type="save"></uif-icon>
<span>3rd</span>
</uif-command-bar-item>
<uif-command-bar-item>
<span>14</span>
<uif-icon uif-type="chevronDown"></uif-icon>
</uif-command-bar-item>
</uif-command-bar-main>
</uif-command-bar>
</div>
<script type="text/javascript">
angular.module('YourApp', ['officeuifabric.core', 'officeuifabric.components'])
.controller('YourController', function() {})
</script>
</body>
</html>
This is how I figured this out. Using chrome dev tools, I right mouse clicked on the text and choose inspect. This shows the element and the styles associated with it. The default style was to have display: none; applied. When you resize the browser more than 640px wide, you'll see the media query being applied that now says to display: inline; the element.
I have javascript function:
<script type="text/javascript">
function CallPrint(strid) {
var prtContent = document.getElementById(strid);
var WinPrint = window.open('', '', 'left=0, top=0, width=970, height=500, toolbar=0, scrollbars=0, status=0');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
}
</script>
and in the button:
onClick="javascript:CallPrint('printarea')"
Now is working and I can print certain part of the page, but I want to add header with logo and some contact information which show only when print the page.
Use the #media print CSS tag. Essentially create a style which has display:none and in #media print make it visible.
Something like:
<style media="screen">
.onlyPrint{ display: none; }
</style>
<style media="print">
.onlyPrint{ display: block; }
</style>
You call your javascript as regular and depending on whether the rendition is on the screen or the printer, the CSS will handle the show/hide of the header with logo
jQuery
$('a.popup').click(function(){
window.open( this.href, 'Page title', 'width=600, height=650' );
return false;
});
HTML
<a class="popup" href="sample.html">
I want to hide the header and footer if my sample.html page is opened in a popup window. Can I add a class name to the <html> or <body> to the popup?, so I can add the CSS rules. Thanks!
from sample.html in the <head> section just check if window.opener exists, e.g.
<script>
if (window.opener) {
/* i'm a popup, add "popup" class to <html> element */
document.documentElement.className += " popup";
}
</script>
then you can set your own CSS style using class .popup, e.g.
header { display: block; }
.popup header { display: none; }
I want to print the data of selected div instead of whole page,
I am using window.print() but its printing the whole web page.
Do as shown in following example:
<html>
<head>
<style type="text/css" media="print">
#media print
{
#non-printable { display: none; }
#printable {
display: block;
width: 100%;
height: 100%;
}
}
</style>
</head>
<body>
<div id="printable" >
Your content to print
</div>
<div id='non-printable'>
this is not printable section
</div>
<input type="button" id="non-printable" class=normaltext onclick="JavaScript:window.print();" value="print" />
</body>
</html>
for more detail or download visit the site:
http://blog.developeronhire.com/print-selected-div-in-web-page/
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
How about writing a style sheet for print and set it up to show the relevant elements on the page.
If you know which segments you want to print before hand, you can use media based CSS to hide unwanted segments of the page in print. Have a look at
http://www.killersites.com/articles/newsletterArchive/Newsletter_Nov3_2003.htm