Question

我尝试在打印预览（Chrome浏览器）期间将margin-top设置为可以删除页眉文本（日期时间，网址）的最小尺寸，但在任何尺寸下，标题都不会被删除

我有一个html文件 iframe.html ，它是对包含打印按钮的另一个html文件 print.html 的iframe引用。

Iframe.html的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <iframe src="print.html" frameborder="0"></iframe>
        </div>
    </div>
</body>
</html>

print.html 是我要打印其内容的页面，并希望删除标题文字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <!-- Include BS and FA -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <style>
        @media print {
            @page {
                margin-top:0.5cm;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <p>Hello Please press button print to preview</p>
            <button>Print</button>
        </div>
    </div>
    <script>
        $(document).ready(function(){
            $('button').click(function(){
                window.print();
            })
        })
    </script>
</body>
</html>

在 print.html 中，我将@page的margin-top设置为最小尺寸0.5cm我认为它会删除标题页，但是在打印预览中<的内容< strong> print.html 与标题文字重叠。

在打印预览中看起来像这样：

我想知道是否有任何css hack我会在打印过程中删除页眉打印预览，目前我正在使用Chrome浏览器。

被修改

上面建议的答案不适用于我当前的问题，因为我已经从那里测试了解决方案。区别在于我是来自 iframe 的打印页面而不是仅来自页面。如果我单独运行文件 print.html ，则magin-top样式可以删除页面标题，但问题是当从iframe按下打印按钮时，这不起作用。

无法从Chrome浏览器中删除打印时的页眉文本

被修改

0 个答案: