How to print only Canvas content? - javascript

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.

Related

Use the HTML 'script' tag in a JavaScript file with the innerHTML keyword

I am using the innerHTML keyword in a JavaScript file. This innerHTML code works fine and the result is correctly displayed in the browser. However, I also want to import some icons from an external JavaScript file. How could I do this?
I have tried to write the statement in the HTML file. I have also tried to write the statement inside the innerHTML section of the JavaScript file. However, the icons are not displayed.
When I import the icons from the HTML document, and also use the icons in the HTML document, this works as expected. However, when I try to use the icons inside the innerHTML section of the JavaScript file, this does not work.
For example, I have this HTML code:
<head>
<script src="The link to the source of the script"></script>
</head>
and this JavaScript code:
const headerTemplate = document.createElement('template');
headerTemplate.innerHTML = `
<i class="fab fa-twitter"></i>
`
This code should be added directly into the body tag of the document, instead of inside a class or div.
There are some critical points here to make sure of:
missing to include the FontAwesome assets with the element <link rel="stylesheet".../> in the html?
createElement('template') returns a <template> element that doesn't work like regular elements. Here in this demo I used a <div>
The element just created needs to be appended to the dom to render it to screen
const headerTemplate = document.createElement('div');
headerTemplate.innerHTML = '<i class="fab fa-twitter"></i>';
document.querySelector('body').append(headerTemplate);
body{
font-size: 50px;
outline: solid;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<body>
</body>

Show content only in printing page not in browser page using CSS or javascript

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

JavaScript code blocking CSS

When I insert this code into my file it seems to block my CSS from showing. I made a script to try and print text once the page has loaded which I am then going to use later to make a loaded bar. This is my code. All that happens is I get the text "Test" printed on my page.
<html>
<head>
<link rel="stylesheet" type="text/css" href="custom.css">
<script>
function myFunction() {
document.getElementById('index').innerHTML = "test";
}
</script>
</head>
<!-- Page Body -->
<body id="index" onload="myFunction()">
<div class="header">
<div id="headerbar"></div>
<ul id="">
</div>
</body>
</html>
When you set the innerHTML of the index element, it completely replaces everything in the body. So you no longer have the DIV with the header class, and you no longer have the DIV with the headerbar ID. There's nothing for your CSS to refer to. It's as if you had written:
<body id="index">test</body>
Well for one we have no way of knowing what your CSS does, but an issue I see is that when you are using innerHTML it overwrites existing HTML. As in everything inside the body tag is overwritten to just test text.
Caveat: My presumption is that you don't have styles on the body either.
What exactly is your CSS supposed to style when you set the innerHTML of your body element to "test" ? You're removing all other contained elements by doing this.
I guess what you wanted to do is add a text node like this:
document.body.appendChild(document.createTextNode("test"));

window.print() Print only Text

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" />

Print page created with javascript not styling according to css

I have a div with id target_wrapper.
<div id="target_warpper">
<div id="target">
///Some content here
</div>
</div>
And the corresponding javascript function to print the page is :
<div class="print_list">
Print
</div>
<script type="text/javascript">
function PrintContent()
{
var DocumentContainer = document.getElementById('target_warpper');
var WindowObject = window.open('', 'PrintWindow', 'width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes');
WindowObject.document.writeln('<!DOCTYPE html>');
WindowObject.document.writeln('<html><head><title></title>');
WindowObject.document.writeln('<link rel="stylesheet" type="text/css" href="css/print.css">');
WindowObject.document.writeln('</head><body>')
WindowObject.document.writeln(DocumentContainer.innerHTML);
WindowObject.document.writeln('</body></html>');
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
}
</script>
But when I click on the Print link, the page that appears does not contain the css css/print/css I have included.
NB: When I click on the view page source for the print pop up window, it shows blank!
Here is an example showing this code working in a jsFiddle. I included jQuery just to make the event bind on the click a little easier.
When you comment out the print() & close() - its a lot easier to check what happens. In that example, I appear to get exactly what you want. New window, correct content, link tag with the right href attribute.
If you are having trouble with the css file, double check the file path. To be easier, you should probably just specify the full url for the css file: http://example.com/css/print.css.

Categories