Как применить стили и сделать окно масштабируемым с помощью window.open

После нескольких дней попыток я не в своем уме:

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();
}

Я попытался с body style=".." или предоставить URL замену токена с div-контентом в chrome, opera, firefox, edge...

... чтобы назвать некоторые варианты.

Результат всегда отображается одним и тем же шрифтом, не масштабируется пользователем, принимается только имя шрифта, размер шрифта уничтожается.

Я был бы очень признателен за помощь. Спасибо.

К настоящему времени я предполагаю, что это потому, что контент загружается через XHR ( Ajax).

Кажется, нет никакого способа отформатировать html-контент, записанный в новом окне, если контент был загружен через xhr.

Я закончил создание PDF ((

Источник

2 ответа

font-size из 10px относительно нормально, поэтому не было бы заметного изменения в размере отображаемых слов.

Если вы измените font-size на большее количество пикселей, как 100px, вы увидите разницу.

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

Источник

Этот код работает для меня: просто скопируйте и вставьте этот код в HTML-файл 

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

Источник
Другие вопросы по тегам