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
Related
My HTML is as follows:
<link href="https://snip-share.herokuapp.com/static/css/prism.css" rel="stylesheet" />
<pre><code class="language-Python line-numbers">import time
print(time.time())</code>
</pre>
<script src="https://snip-share.herokuapp.com/static/js/prism.js"></script>
Output of above code:
Output of above code => https://i.stack.imgur.com/EDSVQ.jpg
Expected Output:
Expected Output => https://i.stack.imgur.com/7esAU.png
Simply means I just want to set the black box width according to the text width inside it, so kindly suggest me any way to do so...
Wrap the content with a container element and apply display: inline-block to it.
div {
display: inline-block;
}
<link href="https://snip-share.herokuapp.com/static/css/prism.css" rel="stylesheet" />
<div>
<pre><code class="language-Python line-numbers">import time
print(time.time())</code>
</pre>
</div>
<script src="https://snip-share.herokuapp.com/static/js/prism.js"></script>
here is my code while i download pdf images attributes of html are missing.
suppose in cases like generating invoices we should print tables containing details along with logo.
but images are not displaying in downloaded pdf using this code.Provide me with possible resolution and reason for this.thanks in advance
$(document).on('click', '#btn', function() {
let pdf = new jsPDF();
let section = $('body');
let page = function() {
pdf.save('pagename.pdf');
};
pdf.addHTML(section, page);
})
html,
body {
overflow-x: hidden;
}
#btn {
padding: 10px;
border: 0px;
margin: 50px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML with Image</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<style type="text/css">
</style>
</head>
<body>
<button id="btn">Convert to PDF</button>
<div id="text">
<h2>HTML Page with Image to PDF</h2>
<img src="http://photojournal.jpl.nasa.gov/jpeg/PIA17555.jpg" width="300px">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="custom.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
all the html elements are working fine except images . kindly help me with resolving this.
jsPdf does not support adding images the way you are trying to add them, because addtHtml function uses the html2canvas module, to convert your Html to canvas, so jsPdf can render it into pdf. Please check this link below.
https://weihui-guo.medium.com/save-html-page-and-online-images-as-a-pdf-attachment-with-one-click-from-client-side-21d65656e764
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.
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();
}
i am using java script to print a selected area from in an html page..i used the #MEDIA print { .. to hide all headers, buttons and image from the page. It gets hidden but empty space remains. how do i align the print contents to print from the top of the page..
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
#MEDIA print {
#top_part{
visibility:hidden;
}
#print{
margin-top: 5px;
}
}
</style>
</head>
<body>
<div id="top_part">
<button onclick="window.print();">print</button>
hello <br/>
<br/><br/><br/><br/><br/>
test if the printer avoids this content
<br/>
print this..
</body>
</html>
in the code the div top_part contains the buttons and text which i need to hide and it hides but how do i align the printable area from the top corner of the print
try
#MEDIA print {
#top_part{
display:none;
}