Question

我正在尝试从Bootstrap 3.0轮播中获取要打印的项目。目前它只打印旋转木马中的所有项目。我有一个下拉列表供用户选择打印选项，即“打印单个项目”和“打印所有项目”。我无法弄清楚如何打印单个旋转木马项目，无论如何都会打印所有项目。

我的Javascript打印功能是：

function PrintSingleLoanReport() {
  var toPrint = document.getElementById('PaymentHistoryOpenItemsReportCarousel');
  $('.item').css("display", "inline");
  var popupWin = window.open("");
  popupWin.document.open();
  popupWin.document.write('<html><title>Payment History & Open Items</title><link rel="stylesheet" type="text/css" href="../Content/PrintSingleReport.css"/></head><body onload="window.print()">')
  popupWin.document.write(toPrint.innerHTML);
  popupWin.document.write('</html>');
  popupWin.document.close();
}

function PrintAllLoanReports() {
  var toPrint = document.getElementById('PaymentHistoryOpenItemsReportCarousel');
  $('.item').css("display", "block");
  var popupWin = window.open("");
  popupWin.document.open();
  popupWin.document.write('<html><title>Payment History & Open Items</title><link rel="stylesheet" type="text/css" href="../Content/PrintAllReports.css"/></head><body onload="window.print()">')
  popupWin.document.write(toPrint.innerHTML);
  popupWin.document.write('</html>');
  popupWin.document.close();
}

下拉菜单代码为：

<ul class="dropdown-menu">
  <li><a href="javascript:void(0)" onclick="PrintSingleLoanReport(); return false;">Print Single Loan Report</a>
  </li>
  <li><a href="javascript:void(0)" onclick="PrintAllLoanReports(); return false;">Print All Loan Reports</a>
  </li>
</ul>

非常感谢任何帮助。谢谢。

*更新*

我被指向dn Fer找到解决方案，谢谢。我为解决这个问题所做的是获取轮播数据，然后获取活动元素的索引。我按类名查找元素，因为它们是旋转木马的几个“项”类，我必须将当前项的索引传递给'toPrint'。

function PrintSingleLoanReport() {
  //  This variable contains all kinds of data and methods related to the carousel.
  var carouselData = $("#PaymentHistoryOpenItemsReportCarousel").carousel().data('bs.carousel');
  //  Get current index of active element.
  var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active'));
  var toPrint = document.getElementsByClassName("item");
  $('.item').css("display", "inline");
  var popupWin = window.open("");
  popupWin.document.open();
  popupWin.document.write('<html><title>Payment History & Open Items</title><link rel="stylesheet" type="text/css" href="../Content/PrintSingleReport.css"/></head><body onload="window.print()">')
  popupWin.document.write(toPrint[currentIndex].innerHTML);
  popupWin.document.write('</html>');
  popupWin.document.close();
}

从Bootstrap轮播中打印一个或多个项目

0 个答案: