Question

当我使用window.print打印我的页面时，它会自动在页眉和页脚中添加一些数据

for ex：在页面顶部添加 - page tittle和localhost url。在页面底部添加 - 页码和时间。如何从我的页面中删除这些信息

我的Html页面：

<title>GM Shop Click Drive Tracker Tool - Reports</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.css" media="screen"/>
<style>
  body {
    padding-top: 6px; /* 60px to make the container go all the way to the bottom of the topbar */
  }
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/gmpt.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
<![endif]-->

<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
                <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
                               <link rel="shortcut icon" href="ico/favicon.png">

<style type="text/css">

@media print {
    input {
        display:none !important;
    }
    .ui-helper-hidden-accessible {
        display:none !important;
    }
    #headRow {
        display:none;
    }
    .sidebar-nav {
        display:none !important;
    }
    select {
        display:none !important;
    }
    .dataList {
        width:90% !important;
    }
}

    table.dataList {
        border-collapse: separate;
        border-spacing: 0;
    }
    table.dataList th {
        background-color: #f0f0f0;
    }

    table.dataList tr th,
    table.dataList tr td {
        border-right: 1px solid #bbb;
        border-bottom: 1px solid #bbb;
        padding: 5px;
    }
    table.dataList tr th:first-child,
    table.dataList tr td:first-child {
        border-left: 1px solid #bbb;
    }
    table.dataList tr th {
        background: #eee;
        border-top: 1px solid #bbb;
        text-align: left;
    }

    /* top-left border-radius */
    table.dataList tr:first-child th:first-child {
        border-top-left-radius: 6px;
    }

    /* top-right border-radius */
    table.dataList tr:first-child th:last-child {
        border-top-right-radius: 6px;
    }

    /* bottom-left border-radius */
    table.dataList tr:last-child td:first-child {
        border-bottom-left-radius: 6px;
    }

    /* bottom-right border-radius */
    table.dataList tr:last-child td:last-child {
        border-bottom-right-radius: 6px;
    }   
    tr.alternate {
        background-color: #f0f0f0;
    }
    .highlight {
        background-color:#FFFFE0 !important;
    }
</style>

<div class="container-fluid">
    <div class="row-fluid" id="headRow">
        <div class="span2" style="text-align: center">
        <img src="images/shop_click_drive_logo.jpg" style="width:100px"/>
        </div>
        <div class="span10" style="vertical-align: bottom;padding-top:40px;padding-bottom:0px">
        <ul class="nav nav-tabs" style="padding-bottom:0px;" id="topTabs">
          <li class="active" id="dealerTab"><a href="#" onclick="navToReport('dealer');return false;">Dealer Report</a></li>
          <li  id="statusTab"><a href="#" onclick="navToReport('status');return false;">Dealer by Status</a></li>
          <li id="stepTab"><a href="#" onclick="navToReport('step');return false;">Dealer by Step</a></li>
          <li id="userTab"><a href="#" onclick="navToReport('user');return false;">Dealer by User</a></li>
          <li id="userTab"><a href="#" onclick="navToReport('inProcess');return false;">"In Process" Report</a></li>
          <li id="userTab"><a href="ajax.php?cmd=routeOneReport">RouteOne Report</a></li>
        </ul>           

        </div>
    </div>
    <div class="row-fluid">
        <div class="span2">
            <div class="well sidebar-nav">
                <ul class="nav nav-list">
                  <li><a href="index.php">Dashboard</a></li>
                  <li><a href="tracker.php">Tracker</a></li>
                  <li class="active"><a href="reports.php">Reports</a></li>
                  <li><a href="broadcast.php">BroadCast</a></li>
                  <li><a href="calendar.php">Calendar</a></li>
                  <li><a href="documents.php">Documents</a></li>
                                      <li><a href="admin.php">Admin</a></li>
                                      <li><a href="profile.php">Profile</a></li>
                  <li><a href="#" onclick="logout();">Logout</a></li>
                </ul>
            </div><!--/.well -->
        </div><!--/span-->
        <div class="span10" id="mainContent" style="padding-left:20px">
            <!-- Begin Content -->
        <div class="row">
<div class="span12">
<input type="text" style="width:50%" name="locationSelector" id="locationSelector" value="Start typing location name/id" onfocus="this.value=''"/>
</div>

</div><!-- /container -->

Answer 1

您将无法删除这些页眉和页脚，因为它是将它们放在那里的浏览器。在某些浏览器上，用户可能能够删除页眉和页脚，但由于这需要（精明）用户的干预，因此可能不是您正在寻找的解决方案。

如果您真的必须自己删除页眉/页脚，您唯一的选择似乎是生成PDF输出，然后用户可以打印或保存到磁盘。某些CMS将自动提供此功能（例如Joomla）。如果您自己动手，请查看以下库：

这些类能够将HTML文档（或其中的一部分）转换为PDF。它们允许您传入CSS文件，以便您可以确定生成的PDF的布局和样式。根据我的经验，只要您避开（复杂）表格，它就能很好地运作。

Answer 2

您也可以转向JS打印特定的DIV。这是示例

<强> JS

function printPage(id) {
    var html="<html>";
    html+= document.getElementById(id).innerHTML;
    html+="</html>";
    var printWin=window.open('','','left=0,top=0,width=1,height=1,toolbar=0,scrollbars=0,status =0');
    printWin.document.write(html);
    printWin.document.close();
    printWin.focus();
    printWin.print();
    printWin.close();
}

您可以在点击事件上调用上述功能。

使用打印介质CSS删除页眉和页脚

2 个答案: