javascript - 使用 ng-if/ng-show/ng-hide 时出现困惑

Question

我的 html 中有几个 div。我正在将内容导出为 PDF，当用户单击导出按钮时会下载 PDF。我希望少数 div 的内容不导出/显示在 PDF 中，但应显示在网页上。我已将 ng-if="!isExporting" 用于我不想在 PDF 中显示其内容的 div，并且在加载页面时在 js 代码中显示我已分配的 $ scope.isExporting = false; 当用户单击导出按钮时，在我分配了 $scope.isExporting = true 的位置调用函数 export()。问题仍然是内容导出为 PDF 并显示。请建议如何隐藏/限制某些div的内容显示在PDF中但应该显示在网页上。

演示:http://plnkr.co/edit/Ik5O3rlKVLhzxz3ySw2g?p=preview

html代码:

<div role="tabpanel" class="tab-pane active" ng-controller="myDetailsController">
  <div class="row">
    <div class="col-md-12">
      <div class="panel panel-primary">
        <br>
        <div style="margin-left: 5%">
          <button ng-click="export()">export</button>

          <form name="myDetailsform" novalidate>
            <div ng-if="addRow" class="row" style="border: 1px solid; width: 90%; margin-top: 2%;">
              <div class="row">
                <div class="col-md-3" style="margin-left: 2%">
                  <div style="font-size: 4vmin;">Title1:</div>
                  <div class="form-group" ng-class="{ 'has-error': myDetailsform.title.$error.required }">
                    <input style="width: 100%; height: 230px;" type="text" name="title" class="form-control" ng-model="dataRow2Add.title" required/>
                  </div>
                </div> 
                <div class="col-md-8 summernote1">
                  <div style="font-size: 4vmin;" class="hideThis" ng-if="!isExporting">Details1 :</div>
                  <summernote config="summerOptions" ng-model="dataRow2Add.titleDetails" ng-if="!isExporting"></summernote>
                </div>
              </div>
            </div>
            <div id="{{value.title}}" ng-repeat="(key, value) in myDetailsDetails" class="myDivClass">
              <div ng-hide="editData[value.myDetailsDetailsId]" class="row" style="border: 1px solid; width: 90%; margin-top: 2%;">
                <div class="row" style="margin-top: 1%">
                  <div class="col-md-10">
                    <span style="margin-left: 2%" class="hideThis" ng-if="!isExporting">
                      <label>Pick Date To : <input type="date" ng-model="panelCopyDate">
                        <button class="btn btn-primary" type="button" ng-click="copyPanelToDate($index, panelCopyDate)">GO</button>
                      </label>
                      <a style="margin-left: 5%; font-size: 100%;" href="javascript:void(0)" ng-click="copyToNextWeek($index)">Pick Date To Next Week</a>
                    </span>
                  </div>
                  <div class="col-md-1">
                    <a style="float:right; margin-right: 2%; margin-top: 1%; font-size: 24px;" href="javascript:void(0)" ng-click="modifydataRow(value.myDetailsDetailsId, $index)" class="hideThis">Edit</a>
                  </div>
                </div>
                <div class="row">
                  <div style="font-size: 5vmin; color: #162E71;margin-left: 2%;">{{value.title}}</div>
                  <div style="margin-left: 3%; margin-top: 2%; margin-bottom: 2%" ng-bind-html="trustAsHtml{{value.titleDetails}}"></div>
                </div>

                <div class="col-md-8 summernote1" ng-if="isExporting">
                  <h2>Dont show/export this and below div content to PDF</h2>
                  <div style="font-size: 4vmin;" class="hideThis" ng-if="!isExporting">Details2 : hideBasicInfo :::{{hideBasicInfo}}</div>
                  <summernote config="summerOptions" ng-model="value.titleDetails" class="hideThis" ng-if="isExporting"></summernote>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

js代码:

$scope.isExporting = false;

$scope.export = function() {
  var pdf = new jsPDF('p', 'pt', 'A4');
  var pdfName = 'test.pdf';
  var options = {};
  $scope.isExporting = true;
  $scope.hideBasicInfo = true;   
  var $divs = $('.myDivClass') //jQuery object of all the myDivClass divs
  var numRecursionsNeeded = $divs.length -1; //the number of times we need to call addHtml (once per div)
  var currentRecursion=0;

  function recursiveAddHtmlAndSave(currentRecursion, totalRecursions){
    //Once we have done all the divs save the pdf
    if(currentRecursion==totalRecursions){
      pdf.save(pdfName);
      $scope.isExporting = false;  //again isExporting should be assigned to false to make it visible on the webpage once the PDF is saved.
    } else {
      currentRecursion++;
      pdf.addPage();
      pdf.fromHTML($('.myDivClass')[currentRecursion], 15, 20, options, function() {
        console.log(currentRecursion);
        recursiveAddHtmlAndSave(currentRecursion, totalRecursions)
      });
    }
  }

  pdf.fromHTML($('.myDivClass')[currentRecursion], 15, 20, options, function() {
    recursiveAddHtmlAndSave(currentRecursion, numRecursionsNeeded);
  });
}

PS:我想在网页上显示div，但少数div不应该在PDF中显示。我也尝试过使用 ng-show/ng-hide 但行为是相同的，它没有隐藏 PDF 中的内容。

Answer 1

我发现您没有将任何选项传递给 pdfJS 函数。您可以通过添加 ids 并将其传递给 elementHandlers 选项来跳过任何元素，如下所示。

var elementHandler = {
  '#skipExport': function (element, renderer) {
    return true;
  }
};

var options = {
  'elementHandlers': elementHandler
};

在 HTML 模板中，添加 id:

<h2 id="skipExport">Don't show/export this and below div content to PDF</h2>

更新后的plunkr可见here .