2

After days of trying I am out of my brain:

function prtDiv( o ) {
var css = 'body {font:normal 10px Arial;}' ;
var wo = window.open('','print','width=600,height=600,resizable=yes');  
wo.document.write( '<head><meta name="viewport" content="width=device-width, initial-scale=0.5 user-scalable=1"/> <style>'+css+'</style><body>'+ o.innerHTML+'</body>'); 
wo.focus();
}   

I have tried with body style=".." or to provide an url an replace an token with the div-content in chrome, opera, firefox, edge ...

... to name some variations.

The result is always displayed in the same font, is not user-scalable, only font-name is accepted, font-size is killed.

I would really appreciate some help. Thank you.

By now I guess, that it is because the content is loaded via XHR ( Ajax).

There seem to be no way to format html-content written to a new window, if the content was loaded via xhr.

I ended up creating a PDF :((

Helmo56
  • 79
  • 1
  • 3

2 Answers2

0

A font-size of 10px is relatively normal so there would've been no noticeable change in the size of the displayed words.

If you change the font-size to a larger number of pixels, like 100px, you will see a difference.

JSFiddle: http://jsfiddle.net/mt6fydg8/4/

Unmitigated
  • 76,500
  • 11
  • 62
  • 80
  • yes, runs. that was my startpoint :). and then i moved into my application context (xhr) - and it won't. no errors, no inline styles in the div – Helmo56 Aug 02 '18 at 16:38
0

this code is working for me: just copy and paste this code in html file enter image description here

<html>
<head>
<script>
function prtDiv(o) 
{
 var css = 'body {font-size:25px; font-weight:bold; font-face:Arial; color:red;}' ;
 var wo = window.open('','print','width=600,height=600,resizable=yes');  
 wo.document.write( '<head><meta name="viewport" content="width=device-width, initial-scale=0.5 user-scalable=1"/> <style>'+css+'</style><body>'+ o+'</body>'); 
 wo.focus();
}   
</script>
</head>
<body>
 <button onclick="prtDiv('<p>Hello world<p>')">Click</button>
</body>

</html>