我的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 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：我想在网页上显示div，但很少有div不会显示在PDF中。我尝试过使用ng-show / ng-hide，但行为相同，它没有隐藏PDF中的内容。
答案 0 :(得分：1)
我建议您在设置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);
答案 1 :(得分：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。