I have an angular material dialog box that I wish to print out.
I have placed as explained here (Can I force a page break in HTML printing?) a page break div like so:
#media print {
.pagebreak { page-break-before: always; }
}
When I do this, the page break is ignored.
I have tested the printing by placing the exact same HTML on a different non-dialog page and it does indeed work as expected.
Is there a way to over-ride the dialog css when printing to allow the page break to work? I think it has something to do with box-sizing as can be seen by the answer of Yuri here: CSS Page-Break Not Working in all Browsers
As on https://developer.mozilla.org/en-US/docs/Web/CSS/break-before
For compatibility reasons, the legacy page-break-before property should be treated by browsers as an alias of break-before
page-break-before is a legacy property, try with break-before
I used page brake in angular component in below way. Apply the style page-brake-before:always inside div tag and this needs to be used inside a table tag. separate with the table tags whenever you want to brake the page.
Hopefully it helps!
app.component.html:
<button mat-icon-button class="float-right" tabindex="-1">
<mat-icon (click)="printROE()">print</mat-icon> </button>
app.component.ts:
printROE(): void {
const w = window.open();
let printHtml = '<html><head><style>.inner-text{font-family: "Open Sans", sans-serif;font-size: 10pt;text-align: justify;}' +
'</style></head><body style="position:relative;">';
printHtml += '<table width="100%" class="inner-text"><thead><title style="font-size:10pt;" align="center"></title></thead><tbody></tbody><tfoot></tfoot></table>';
reportHtml += '<table width="100%" class="inner-text"><tr><div style="page-break-before: always;"></td></tr> </div></tr></table>';
printHtml += reportHtml + '</body><footer></footer></html>';
w.document.write(printHtml);
w.document.close();
setTimeout(() => {
w.focus();
w.print();
w.close();
}, 900);
}
Related
I am generating a PDF using nodejs with pdf-creator-node and I got success.
My requirement is I need to generate a PDF with Height X Width = 926px X 1296px.
I don' know what css I should write to generate this dimension pdf.
right now if I set div or body height and widht with above mentioned dimension I am getting 3 pages
this is what I tried
#page {
width: 1296px;
height: 926px;
}
<div
class="parent-div"
style="
width: 1296px;
height: 926px;
background-color: #faf0e6;
border: 1px solid red;
"
></div>
jsPDF is able to use plugins. In order to enable it to print HTML, you have to include certain plugins and therefore have to do the following:
Go to https://github.com/MrRio/jsPDF and download the latest
Version.
Include the following Scripts in your project:
jspdf.js
jspdf.plugin.from_html.js
jspdf.plugin.split_text_to_size.js
jspdf.plugin.standard_fonts_metrics.js
If you want to ignore certain elements, you have to mark them with an ID, which you can then ignore in a special element handler of jsPDF. Therefore your HTML should look like this:
<!DOCTYPE html>
<html>
<body>
<p id="ignorePDF">don't print this to pdf</p>
<div>
<p><font size="3" color="red">print this to pdf</font></p>
</div>
</body>
</html>
Then you use the following JavaScript code to open the created PDF in a PopUp:
var doc = new jsPDF();
var elementHandler = {
#ignorePDF': function (element, renderer) {
return true;
}
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
source,
15,
15,
{
'width': 180,'elementHandlers': elementHandler
});
doc.output("dataurlnewwindow");
**For me this created a nice and tidy PDF that only included the line 'print this to pdf'.
Please note that the special element handlers only deal with IDs in the current version, which is also stated in a GitHub Issue. It states:**
Because the matching is done against every element in the node tree, my desire was to make it as fast as possible. In that case, it meant "Only element IDs are matched" The element IDs are still done in jQuery style "#id", but it does not mean that all jQuery selectors are supported.
Therefore replacing '#ignorePDF' with class selectors like '.ignorePDF' did not work for me. Instead you will have to add the same handler for each and every element, which you want to ignore like:
var elementHandler = {
#ignoreElement': function (element, renderer) {
return true;
},
#anotherIdToBeIgnored': function (element, renderer) {
return true;
}
};
From the examples it is also stated that it is possible to select tags like 'a' or 'li'. That might be a little bit too unrestrictive for the most use cases though:
We support special element handlers. Register them with a jQuery-style ID selector for either ID or node name. ("#iAmID", "div", "span" etc.) There is no support for any other type of selectors (class, of the compound) at this time.
One very important thing to add is that you lose all your style information (CSS). Luckily jsPDF is able to nicely format h1, h2, h3, etc., which was enough for my purposes. Additionally, it will only print text within text nodes, which means that it will not print the values of textareas and the like. Example:
<body>
<ul>
<!-- This is printed as the element contains a textnode -->
<li>Print me!</li>
</ul>
<div>
<!-- This is not printed because jsPDF doesn't deal with the value attribute -->
<input type="textarea" value="Please print me, too!">
</div>
</body>
I have and angularjs application that fetches data via api, and builds a webpage with it.
Usually I use ng-style to create dynamic styling, but now I have to use the nth-of-type attribute that can only be used in a css stylesheet (I cannot use individual styling since the number and order of elements always change).
I have tried this naive code (in the html page):
<style ng-if="styles.sc && styles.sc.length==3">
a.mosection:nth-of-type(3n) > div {
background-color: {{styles.sc[0]}} !important;
}
a.mosection:nth-of-type(3n+1) > div {
background-color: {{styles.sc[1]}} !important;
}
a.mosection:nth-of-type(3n+2) > div {
background-color: {{styles.sc[2]}} !important;
}
</style>
But it didn't work... Apparently angular doesn't bind the data inside the style tag (the ng-if attribute does get digested properly)
Does anyone have any idea how this can be done?
Thanks!
You should checkout those three ng-*
https://docs.angularjs.org/api/ng/directive/ngClass
https://docs.angularjs.org/api/ng/directive/ngClassOdd
https://docs.angularjs.org/api/ng/directive/ngClassEven
all of them can accept functions as attributes, you can also checkout
https://docs.angularjs.org/api/ng/directive/ngStyle
which might be actually the best in your case
Thanks!
I indeed solved it by using ng-style with a function
The HTML
<div class="widget widget-people" ng-style="{backgroundColor: staggerBgColors('widget', 'widget-people', '#333333')}"></div>
<div class="widget widget-property" ng-style="{backgroundColor: staggerBgColors('widget', 'widget-property', '#24d10f')}"></div>
The scope function
$scope.staggerBgColors = function(elesClass, eleClass, defaultColor){
if (!$scope.styles || !$scope.styles.sc || $scope.styles.sc.length!=3){
return defaultColor;
}else{
var listItem = $('.'+eleClass);
var n = $('.'+elesClass).index( listItem ) % 3;
return '#' + $scope.preview.moment.sc[n];
}
}
I had to implement the same functionality of the css property "nth-of-type" using jQuery, but it works prefectly!
I have a Submit Button like this:
<input type="submit" data-corners="false" id="code_check_button" tabindex="5" data-rel="external" value="GO">
which - with a custom css theme - outputs this: http://sht.tl/59y3m
Now I would like to use the id (#code_check_button) to style the button with more specificity.
Unfortunately jquerymobile automagically transforms the input type submit in a snippet of code I cannot control: http://sht.tl/cQq
As you can note, the original button ID is useless...
Can you tell me how may I custom style that button (of course, without wrapping it in an extra tag...)?
Thank you!
Numerous ways this can be achieved..
Here are a few examples:
submit {
styles:styles;
}
Not the most compatible in older browsers:
input[type="submit"] {
styles:styles;
}
Then you can target the ID:
#code_check_button {
styles:styles;
}
In your stylesheet add the ID #code_check_button and provide the desired style you want.. see example below :-
#code_check_button {
your desired style properties here...
}
EDIT:
You can use the class of the generated div and style the button accordingly. In this generated snippet you have two elements to style. please find below :-
.ui-btn {
style properties here...
}
.ui-btn .ui-btn-text {
style properties here...
}
CSS
#code_check_button {
color:#000 !important;
width:200px !important;
}
You can see I have added !important tag in all the css properties. This is because of overwritten the jQ mobile default styles.
If something keeps changing your intended css into useless code, this may be a situation where you would resort to simple text (eg. nano for mac or notepad for windows) Web design programs are double edged swords, most of the time the bells and whistles on these programs help make things easier, but sometimes they can make things more complicated. To custom style a button all you have to do is put your id or class selector name in the input tag and then enter the css for it. For example
CSS
#code_check_button { background-image: url(/*desired image url*/);
background-color: /*desired background color*/;
color: /*desired font color*/; }
HTML
<input id="code_check_button" type="submit" name="submit">
Just try it in notepad this time.
I have some user generated content I'm trying to render on my site. The rich text box editor I'm using renders font changes using <font /> tags, which are overridden by CSS on the page.
Does anyone know if there is a way to allow rules defined using the <font /> tag to show through?
UPDATE
Since changing the control I'm using for my rich text editor is not an option and my users have no knowledge of HTML to understand the difference between a <font> tag and any other type of tag, I had no choice but to create a hack to fix my problem. Below is the code I used to solve it. It's a jQuery script that changes all <font /> tag attributes into inline CSS.
(function() {
$('font[size]').each(function() {
var fontSize = this.size;
if (fontSize == 1) {
$(this).css("font-size", 8);
} else if (fontSize == 2) {
$(this).css("font-size", 9);
} else if (fontSize == 3) {
$(this).css("font-size", 11);
} else if (fontSize == 4) {
$(this).css("font-size", 15);
} else if (fontSize == 5) {
$(this).css("font-size", 20);
} else if (fontSize == 6) {
$(this).css("font-size", 25);
}
});
$('font[face]').each(function() {
$(this).css('font-family', this.face);
});
$('font[color]').each(function() {
$(this).css('color', this.color);
});
})();
A year late, but thought I'd share nonetheless.
I was frustrated by this, as well. I was using a freeware RTE JavaScript component that produced <FONT /> tags. It wasn't convenient to replace it, as it was for a client and it was a callback to fix this CSS override problem.
Unfortunately, none of the other solutions worked in my case, so after thinking I came up with this JavaScript solution:
var fontEl=document.getElementsByTagName("font");
for(var i=0;i<fontEl.length;i++) {
var f = fontEl[i];
if(f.size)
f.style.fontSize=(Math.round(parseInt(f.size)*12*0.6)).toString()+'px';
if(f.face)
f.style.fontFamily=f.face;
if(f.color)
f.style.color=f.color;
}
The formula for converting font size is incorrect, but accurate enough to produce believable results.
I would suggest overriding the CSS with your own styles that implement the !important attribute.
div.MyClass p
{
font-size: 0.7em !important;
}
The font tag, technically should override most styles as long as it's the closest element to the raw text.
If it's failing it's likely due to the CSS using the !important attribute to override it.
You could convert it to a style tag on the element. Anything in that would take precedence over style sheet defined rules.
Honestly? Get a new rich text editor! TinyMCE or FCKeditor are both okay choices. Either that or educate your users to understand that the styles they set in the editor won't necessarily appear that way when published. Once thing I've done with FCKeditor in the past is limit its toolbar to the basics, like lists, links, headings etc., no styling options whatsoever.
<font> is just an element like any other; it can be styled using CSS. You can write CSS to allow the font tag's styles to push down as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
body { color: black}
a { color: red; font-family: Sans; font-size: 14px;}
font * { color: inherit; font-family: inherit; font-size: inherit}
</style>
</head>
<body>
This is outside inside outside. <font color="green" face="Times New Roman" size="20">Outside inside outside</font>.
</body>
</html>
I'm trying to dynamically hide certain DIV's when a print (or print preview) occurs from the browser.
I can easily differentiate statically by having two style sheets, one for normal and one for print media:
But I need to go one step further and hide some elements dynamically when the print style sheet becomes active during a print based upon certain criteria
One way to easily solve it would be to handle a DOM event for handling print / printview, then I could just use jQuery to change the display:none on the classes that need to be hidden, but I can't find a DOM print event!!
Anyone know what the solution is?
Not all browsers allow you to capture the print event. I've seen this tackled by adding a 'print this page' link and then using that click event to accomplish what you need.
I don't think you need a print event. All you need to do is adjust your #media print styles based on your Javascript(?) criteria. When the user attempts to print the page, the #media print style will apply and your styles will be in effect:
<html>
<head>
<style id="styles" type="text/css">
#media print { .noprint { display:none; } }
</style>
<script type="text/javascript">
var x = Math.random();
if (x > .5) {
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '#media print { .maybe_noprint { display:none; } }';
document.getElementsByTagName('head')[0].appendChild(style);
}
</script>
</head>
<body>
<div class="noprint">This will never print.</div>
<span class="maybe_noprint">This may print depending on the value of x.</span>
</body>
</html>
If you are using server-side criteria to determine what prints, then just have server-side code spit out #media print to decorate the classes as necessary. Also, you may want to consider modifying an existing class that's already inside #media print, or building up the new CSS using something other than innerHTML, which I'll admit smells awful to me, but seems to work in Opera 9.6, Safari for Windows 3.1.2, IE 6 and Firefox 2.0.0.17 (I didn't test any other browsers).
Just tag those DIVs with a class that's hidden on the print stylesheet:
HTML
<div id='div19' class='noprint'>
...
</div>
print.css
.noprint {
display: none;
}
If you don't know in advance which elements you need to hide, you can use javascript to set the class for the given objects:
Javascript
document.getElementById('div19').className='noprint';
There's an onbeforeprint event in IE. It doesn't appear to be supported by other major browsers. (I tested Firefox 3.0.3 and Safari 3.1.2.)