窗口.打印（）；忽略 Div 选择器答案

【问题标题】：window.Print(); ignoring Div Selector窗口.打印（）；忽略 Div 选择器
【发布时间】：2021-05-13 10:12:10
【问题描述】：

我的代码从 SharePoint 列表中读取，将数据存储在数组中，然后将其发布到要打印的 HTML 列表中。在大多数情况下，它可以工作并打印页面。

我已经从我选择打印的 div 容器中排除了打印按钮和搜索栏，但它仍然出现在打印预览中？我可以从打印视图中删除这些元素/同时将每周报告标题的边距以及所有内容移到页面顶部吗？

这是我的 sn-p 它的工作原理：

var data = [{
    "Team": "Eagles",
    "WeekOf": "2021-01-31",
    "Tasks": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
    "Deliverables": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    "Actions": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
    "Billable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    "NonBillable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
    "UpcomingEvents": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
    "Training": null,
    "Resource": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    "Support": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
  },
  {
    "Team": "Raiders",
    "WeekOf": "2021-01-31",
    "Tasks": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
    "Deliverables": null,
    "Actions": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
    "Billable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    "NonBillable": null,
    "UpcomingEvents": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
    "Training": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    "Resource": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    "Support": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
  },
  {
    "Team": "Vikings",
    "WeekOf": "2021-03-30",
    "Tasks": null,
    "Deliverables": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    "Actions": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
    "Billable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    "NonBillable": null,
    "UpcomingEvents": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
    "Training": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    "Resource": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    "Support": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
  }
];

function onSuccess(data) {
  var listContent = [];

  for (var i = 0; i < data.length; i++) {
    listContent += '<li data-weekOf="' + data[i].WeekOf + '">';
    listContent += '<h2>' + data[i].Team + '</h2>';
    listContent += '<h4> Tasks </h4>';
    if (data[i].Tasks !== null) {
      listContent += '<ul>' + "- " + data[i].Tasks + '</ul>';
    } else {
      listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
    }
    listContent += '<h4> Deliverables </h4>';
    if (data[i].Deliverables !== null) {
      listContent += '<ul>' + "- " + data[i].Deliverables + '</ul>';
    } else {
      listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
    }
    listContent += '<h4> Personnel Actions </h4>';
    if (data[i].Actions !== null) {
      listContent += '<ul>' + "- " + data[i].Actions + '</ul>';
    } else {
      listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
    }
    listContent += '<h4> Finance (Billable) </h4>';
    if (data[i].Billable !== null) {
      listContent += '<ul>' + "- " + data[i].Billable + '</ul>';
    } else {
      listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
    }
    listContent += '<h4> Finance (Non-Billable) </h4>';
    if (data[i].NonBillable !== null) {
      listContent += '<ul>' + "- " + data[i].NonBillable + '</ul>';
    } else {
      listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
    }
    listContent += '<h4> Upcoming Events </h4>';
    if (data[i].UpcomingEvents !== null) {
      listContent += '<ul>' + "- " + data[i].UpcomingEvents + '</ul>';
    } else {
      listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
    }
    listContent += '<h4> Training </h4>';
    if (data[i].Training !== null) {
      listContent += '<ul>' + "- " + data[i].Training + '</ul>';
    } else {
      listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
    }
    listContent += '<h4> Resource Request </h4>';
    if (data[i].Resource !== null) {
      listContent += '<ul>' + "- " + data[i].Resource + '</ul>';
    } else {
      listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
    }
    listContent += '<h4> Support Request </h4>';
    if (data[i].Support !== null) {
      listContent += '<ul>' + "- " + data[i].Support + '</ul>';
    } else {
      listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
    }
    listContent += '</li>';
  }
  $('#report-summary').html(listContent);
  $('#under_txt').text(' ');
}
$(document).ready(function() {
  onSuccess(data);
});

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    if ($.trim(value) == '') {
      onSuccess(data);
      return;
    }
    $('#under_txt').text(value);
    $('li').fadeOut(10);
    $('[data-weekOf=' + value + ']').fadeIn();
  });

});

function sortNewestFirst() {
  var elements = $('[data-weekOf]');
  elements.sort(function(a, b) {
    return new Date($(b).attr('data-weekOf')) - new Date($(a).attr('data-weekOf'));
  });
  $('#report-summary').html(elements);
}

function sortOldestFirst() {
  var elements = $('[data-weekOf]');
  elements.sort(function(a, b) {
    return new Date($(a).attr('data-weekOf')) - new Date($(b).attr('data-weekOf'));
  });
  $('#report-summary').html(elements);

}
$('a.printPage').click(function() {
  $('#report-summary').show();
  window.print();
  return false;
});

h2 {
  text-align: left;
  text-decoration: underline;
  font-size: 20px;
}

h1 {
  font-size: 25px;
  text-align: center;
}

ul {
  list-style-type: none;
  padding: 0px;
  margin-left: 0px;
}

li {
  list-style-type: none;
}

span {
  font-size: 15px;
}

#report-summary {
  margin-left: 15px;
  margin-right: 15px;
}

#search {
  text-align: center;
}

p {
  text-align: center;
}

h4 {
  font-size: 17px;
  font-weight: normal;
  text-decoration: underline;
  margin-top: -10px;
  margin-bottom: -10px;
}

#myInput {
  text-align: center;
}

#under_txt {
  margin-left: 5px;
  padding: 0px 10px 0px 10px;
}
@page { size:  auto; margin: 50px; }

@media print {
  #search,
  .printPage {
    display: none;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link type="text/css" media="all" rel="stylesheet">
<div class="container">
  <div id="search">
    <input id="myInput" type="text" placeholder="Search for Week Of">
  </div>
  <a class="printPage" href="#">Print Page</a>
  <h1>Weekly Manager Report</h1>
  <p>Week Of<span id="under_txt"></span></p>
  <div id="report-summary"></div>
</div>

在此示例中，它不起作用，但仍会发布搜索栏和打印按钮：

.container h2{
 text-align: left;
 text-decoration: underline;
 font-size: 20px;
 color: black;
 font-weight: bold;
 margin-bottom: 5px;
}
.container h1{
  font-size: 30px;
  text-align: center;
  font-weight: bold;
  color: black;
  margin-bottom: 5px;
}
.container ul {
  list-style-type: none !important;
  padding: 0px !important;
  margin-left: 0px !important;'
  color: black;
}
ul.black{
 color: black;
}
p.black{
  color: black;
}
.container li{
    list-style-type: none !important;
}
.container#report-summary{
    margin-top: 10px;
}
span{
  font-size: 15px !important;
}
#report-summary{
  margin-left: 15px !important;
  margin-right: 15px !important;
}
#search{
  text-align: center !important;
}
p {
  text-align: center !important;
}
.container h4{
  font-size: 17px;
  font-weight: normal;
  text-decoration: underline;
  margin-top: 10px;
  margin-bottom: 10px;
  color: black;
}
#myInput{
  text-align: center !important;
}
#under_txt{
margin-left: 5px !important;
padding: 0px 10px 0px 10px !important;
color: black;
}
.ms-core-pageTitle {
display: none;

@page { size:  auto; margin: 50px; }
@media print {
  #search,
  .printPage {
    display: none;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link type="text/css" media="all" rel="stylesheet">
<div class="container">
  <div id="search">
    <input id="myInput" type="text" placeholder="Search for Week Of">
  </div>
  <a class="printPage" href="#">Print Page</a>
  <h1>Weekly Manager Report</h1>
  <p>Week Of:<span id="under_txt"></span></p>
  <div id="report-summary"></div>
</div>


function loadData(url) {
  url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('WeeklyReport')/items?$select=DeliverablesSubmitted,MajorTasks,UpcomingTasks,UpcomingDeliverables,PersonnelActions,SupportRequest,ResourceRequest,Team/Value,Training,Upcoming,WeekOf,TravelODC";
  return fetch(url, { headers: { accept: "application/json; odata=verbose" } }) // make request
    .then((r) => {
      if (!r.ok) throw new Error("Failed: " + url);  // Check for errors
      return r.json();  // parse JSON
    })
    .then((data) => data.d.results);
}
loadData()
  .then((results) => {
      let data = results;
      var listContent = '';
      console.log(data);
    for (var i = 0; i < data.length; i++) {
        var currData = data[i];
        listContent += '<li class="test" data-weekOf="'+currData.WeekOf.split("T")[0]+'">';
        console.log(currData.WeekOf.split("T")[0]);
       if(currData.Team !== null){
        listContent += '<h2>' + currData.Team.results.join(', ') +'</h2>';
        }else{
        listContent += '<h2>' + "Null" +'</h2>';
        }
       if(currData.MajorTasks !== null){
        listContent += '<h4> Major Tasks Completed </h4>';
        listContent += '<ul class="black">' + "- " + currData.MajorTasks.replace(/(<([^>]+)>)/gi, "") + '</ul>';
       }else{
       }
       if(currData.DeliverablesSubmitted !== null){
        listContent += '<h4> Deliverables Submitted</h4>';
        listContent += '<ul class="black">' + "- " + currData.DeliverablesSubmitted.replace(/(<([^>]+)>)/gi, "") + '</ul>';
       }else{
       }
       if(currData.UpcomingTasks !== null){
        listContent += '<h4> Upcoming Tasks</h4>';
        listContent += '<ul class="black">' + "- " + currData.UpcomingTasks.replace(/(<([^>]+)>)/gi, "") + '</ul>';
       }else{
       }
       if(currData.UpcomingDeliverables !== null){
        listContent += '<h4> Upcoming Deliverables</h4>';
        listContent += '<ul class="black">' + "- " + currData.UpcomingDeliverables.replace(/(<([^>]+)>)/gi, "") + '</ul>';
       }else{
       }
       if(currData.PersonnelActions !== null){
        listContent += '<h4> Personnel Actions </h4>';
        listContent += '<ul class="black">' + "- " + currData.PersonnelActions.replace(/(<([^>]+)>)/gi, "") + '</ul>';
       }else{
       }
       if(currData.Upcoming !== null){
        listContent += '<h4> Upcoming G3G Events </h4>';
        listContent += '<ul class="black">' + "- " + currData.Upcoming.replace(/(<([^>]+)>)/gi, "") + '</ul>';
       }else{
       }
       listContent += '</li>';
    }
 $('#report-summary').html(listContent);
 $('#under_txt').text(' ');
});
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $('#under_txt').text(value);
    if (value == "") {
      $("li.test").fadeIn();
    } else {
      $('li.test').fadeOut(10);
      $('[data-weekof=' + value + ']').fadeIn();
    }
  });
});
function sortNewestFirst(){
  var elements = $('[data-weekOf]');
  elements.sort(function (a, b) {
      return new Date($(b).attr('data-weekOf')) - new Date($(a).attr('data-weekOf'));
  });
  $('#report-summary').html(elements);
 }
function sortOldestFirst(){
  var elements = $('[data-weekOf]');
  elements.sort(function (a, b) {
      return new Date($(a).attr('data-weekOf')) - new Date($(b).attr('data-weekOf'));
  });
  $('#report-summary').html(elements);
 }
$('a.printPage').click(function(){
        $('#report-summary').show();
           window.print();
           return false;
});

这是它的发布方式：

【问题讨论】：

标签： javascript html jquery css pdf

【解决方案1】：

没有必要的 JS 来防止 DOM 中的项目被打印。您可以通过使用 CSS 来实现它，特别是 @media 规则，在这种情况下，它将隐藏相关内容。试试这个：

@media print {
  #search,
  .printPage {
    display: none;
  }
}

【讨论】：

我实现了它，它隐藏了我的打印按钮。我需要该按钮可见，单击后，它不应出现在打印预览中，搜索栏也是如此。
我的错，我定位错误的媒体类型。我已经更新了答案，它现在应该可以正常工作了
这在问题中提供的具有数据数组的 sn-p 上完美运行，当我将它实现到通过获取获取数据的代码中时，它仍然会发布搜索栏和打印按钮在打印预览中？为什么是这样？我会将 CSS/HTML 的 sn-p 添加到 OP
我什至尝试将 !important 标签添加到 @media print{} 中，但它仍然没有达到预期效果。
HTML 和 CSS 实际上是相同的，所以我不确定为什么它在我的关键示例中不起作用。我也无法查看控制台或任何内容，因为当它打开打印预览时，它会覆盖屏幕的那部分