使用 ng-if / ng-show / ng-hide 时的困惑

Question

我的 html 中几乎没有 div。我正在将内容导出到 PDF，当用户单击导出按钮时会下载 PDF。我希望少数 div 的内容不要在 PDF 中导出/显示，但应该显示在网页上。我已将ng-if="!isExporting" 用于div 的内容，我不想在加载页面时在PDF 和js 代码中显示我已分配$scope.isExporting = false; 并且当用户单击导出按钮时，函数export() 是在我指定$scope.isExporting = true 的地方调用。问题仍然是内容导出到 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。

Answer 2

我建议在设置 isExporting 和 hideBasicInfo 变量后将导出逻辑包装在一个短暂的超时内。这将使 DOM 有时间在您的导出逻辑运行之前进行更新。用户应该不会注意到延迟。

例子：

setTimeout(function() {
  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);
  });
}, 100);

编辑 - 已修复，因此导出后内容将再次显示。

我们可以通过两个简单的超时来完成此操作。您甚至可以延迟1ms 和2ms。这将快速隐藏您想要隐藏的内容，执行导出并再次显示。

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


setTimeout(function() {
  $scope.$apply(function() {
    $scope.isExporting = false;
    $scope.hideBasicInfo = false;
  });
}, 20);

http://plnkr.co/edit/vg6ilw1IdJemKDLdL4EV?p=preview