Question

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

我怀疑在使用新窗口时未发现加载CSS。但是，我不确定，因为打开打印对话框后，我看不到chrome控制台对此有把握。

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

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

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

来自chrome dev工具的图片：

这里的页边距打印错误

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

希望这会有所帮助

（我在您的问题中注意到的另一件事是，您似乎在打印文档主体之前将其关闭？这可能会妨碍打印。请在之后尝试关闭它。）

Answer 2

您应该等待，直到样式真正被加载：

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

在window.open之后加载CSS文件

2 个答案: