Путаница при использовании ng-if / ng-show / ng-hide
У меня есть несколько div внутри моего html. Я экспортирую содержимое в 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.
2 ответа
Я вижу, что вы не передали никаких опций функции 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>
Обновленный планкр можно посмотреть здесь.
Я бы порекомендовал перенести логику экспорта в короткий промежуток времени после того, как вы установили 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);