如何使用window.open应用样式并使窗口可缩放
[英]How to apply styles and make window scalable with window.open
问题描述
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 ... 我尝试使用body style =“ ..”或提供一个网址，用chrome，opera，firefox，edge中的div内容替换令牌...
... 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). 现在，我想这是因为内容是通过XHR（Ajax）加载的。
There seem to be no way to format html-content written to a new window, if the content was loaded via xhr. 如果内容是通过xhr加载的，则似乎无法格式化写入新窗口的html内容。
I ended up creating a PDF :(( 我最终创建了PDF：（（
2 个解决方案
解决方案1
0 2018-08-02 15:28:07
A font-size of 10px is relatively normal so there would've been no noticeable change in the size of the displayed words. 10px font-size是相对正常的，因此显示的单词的大小不会有明显的变化。
If you change the font-size to a larger number of pixels, like 100px , you will see a difference. 如果将font-size更改为较大的像素数（例如100px ，则会看到差异。
JSFiddle: http://jsfiddle.net/mt6fydg8/4/ JSFiddle： http : //jsfiddle.net/mt6fydg8/4/
解决方案2
0 2018-08-02 16:23:07
this code is working for me: just copy and paste this code in html file 此代码对我有用：只需将此代码复制并粘贴到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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.