javascript - 无法为每次迭代隐藏 div，并希望隐藏正在显示的边框

Question

当用户单击导出按钮时，数据将导出为 PDF。我试图在导出为 PDF 时隐藏其中一个 div 内容。下面是我用来隐藏 div 内容的代码。

$("#dontExport1").hide();

当使用 .hide() 时，数据也会隐藏在 PDF 和网页上，所以我在之后使用了 $("#dontExport1").show()生成并保存 PDF 以在网页上再次显示隐藏的内容。

问题出在我的代码上，只有第一次生成的 div 被隐藏，但我有多个 div 使用 id="dontExport1" 生成。如何使用 id="dontExport1" 隐藏所有的 div。第二个问题是我可以看到在 PDF 中在每一页的第一行之前和最后一行之后打印了一些边框或边距，我想隐藏该边框。任何建议都会有所帮助。

请找到演示:https://plnkr.co/edit/81p9MhvGsrSasfUVf1es?p=preview

示例js代码:

 $scope.export = function() {
   $("#dontExport1").hide();
        var pdf = new jsPDF('landscape');
        var pdfName = 'test.pdf';

        var options = {};

        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;

        //Found a trick for using addHtml more than once per pdf. Call addHtml in the callback function of addHtml recursively.
        function recursiveAddHtmlAndSave(currentRecursion, totalRecursions){
            //Once we have done all the divs save the pdf
            if(currentRecursion==totalRecursions){
                pdf.save(pdfName);
                 $("#dontExport1").show();
            }else{
                currentRecursion++;
                pdf.addPage();
                //$('.myDivClass')[currentRecursion] selects one of the divs out of the jquery collection as a html element
                //addHtml requires an html element. Not a string like fromHtml.
                pdf.addHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
                    console.log(currentRecursion);
                    recursiveAddHtmlAndSave(currentRecursion, totalRecursions)
                });
            }
        }

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

--已编辑---

请在下图中找到我想在生成的 PDF 的每一页中隐藏的边框用黑色四舍五入。

Answer 1

尽量不要将 jquery 与 angular 混合使用，您可以使用 ng-if 而不是 .hide()

使用一些类似的标志

 <div ng-if="!isExporting"><h3><font color="green"> Hide this text in PDF</font></h3></div>
   </div>

然后在 Controller 中

$scope.isExporting = true; 当你需要隐藏这个 div 和 $scope.isExporting = false; 当你需要显示时。

我也没有看到你提到的任何边框，你能突出显示那个吗

Working demo