javascript - window.open 后加载 CSS 文件

Question

我正在尝试设置窗口的打印边距。我使用下一个代码(在“PrintDiv”中)打开并打印窗口。我的问题是打印边距不起作用。

我怀疑在使用新窗口时没有找到要加载的 css。但是，我并不确定，因为在打印对话框打开后，我看不到 chrome 控制台来确定它。

在其他 html 页面中，我只是使用 next 来加载文件:

<link rel="stylesheet" href="files/css/print.css" media="print" >

但是，当打开一个新窗口时，它不起作用。

图片来自 chrome 开发工具:

这是错误的边距打印

--print.css文件--

@page{
    margin: 10cm;  
}

--脚本--

function PrintDiv(){
 var w = window.open('');
 var html = '<div>test</div>'; 
 loadStyle(w,'/files/css/print.css');
 $(w.document.body).html(html);
 w.document.close;
 w.focus();
 w.print();
 w.close();
}

function loadStyle(w,href, callback){
    // avoid duplicates
    for(var i = 0; i < w.document.styleSheets.length; i++){
        if(w.document.styleSheets[i].href == href){
            return;
        }
    }
    var head  = w.document.getElementsByTagName('head')[0];
    var link  = w.document.createElement('link');
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = href;
    link.media="print";
    if (callback) { link.onload = function() { callback() } }
    head.appendChild(link);
    console.log(w.document)
}

致 JensV:

致雷切尔:

Answer 1

首先，标准 A4 页面的尺寸为 210mm x 297mm，因此您在所有边上 100mm 的边距似乎过大 - 最多中间有 1cm 的打印区域，如果没有额外的填充。 US Letter 较小，所以除非您在非常大的页面上打印，否则我建议您将页边距减少到最多 7 或 8 厘米，哪怕是稍微减少一点。

您的样式 css 中的打印 css 应具有以下格式:

@media print {
  @page {
    margin: 7cm;
  }
  header, footer, nav {
     display: none; /*e.g*/
  } 
}

要指定页面左侧和右侧的打印边距，您还可以使用

@page :left{margin:2cm;}  and
@page :right{margin:8cm;}   /*sizes used are purely for example*/

我注意到您在评论中省略了“@”符号。确保您键入 @media(带有 @)，并且其他 css 规范周围的媒体查询括号已关闭。

您可以在同一个 css 样式表中包含其他/所有 css，只需确保屏幕媒体查询被 @media screen{} 括号括起来。

您可以从 html 的 css 链接中删除 "media=print"。

希望对你有帮助

(我在你的问题中注意到的另一件事是，你似乎在打印之前关闭了文档正文？这可能会阻碍打印。请尝试在之后关闭它。)