confusion while using ng-if / ng-show / ng-hide

Question

I have few div's inside my html. I am exporting the content to the PDF and PDF is downloaded when user click on he export button. I want few div's content not to be exported/shown inside the PDF but it should be shown on the webpage . I have used ng-if="!isExporting" to the div's whose content i don't want to show in the PDF and in the js code when the page is loaded i have assigned $scope.isExporting = false; and when user clicked on export button, function export() is called where i have assigned $scope.isExporting = true . Issue is still the content is exported to the PDF and shown. Please advice how to hide/restrict some div's content to be shown in the PDF but should be shown on the webpage.

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

html code:

<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 code:

$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: I want to show the div's on the webpage but few of the div's should not be shown in the PDF. I tried using ng-show/ng-hide too but the behavior is same , it is not hiding the content in the PDF.

Answer 1

I would recommend wrapping the export logic in a short timeout after you set your isExporting and hideBasicInfo variables. This will give the DOM time to update before your export logic runs. The delay should not be noticeable to the user.

Example:

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);

EDIT - Fixed so content will show again after export.

We can accomplish this with two simple timeouts. You can even make the delays 1ms and 2ms . This will quickly hide the content you want hidden, perform the export, and show it again.

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

Answer 2

I see that you didn't pass any options to the pdfJS function. You can skip any elements by adding ids and passing them to elementHandlers option, as follows.

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

var options = {
  'elementHandlers': elementHandler
};

In the HTML template, add the id :

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

Updated plunkr can be seen here .