js代码获取动态生成的div ID答案

【问题标题】：js code to get the dynamic generated div IDsjs代码获取动态生成的div ID
【发布时间】：2017-10-28 22:52:33
【问题描述】：

我正在开发 java 和 angularjs 应用程序。我有一个 html 页面，它迭代对象并在页面上显示值。

html代码：

<div id="{{value.pageIndex}}" ng-repeat="(key, value) in employees" class="myDivClass">
    <div>
         <h1><font color="red"> {{value.pageHeader}}</font></h1>
    </div>
    <div>
         <h1> {{value.pageIndex}}</h1>
    </div>
    <div>text from html page</div>
</div>

我不应该将上面的 html 代码包含在另一个 div 中，因为它会使我的应用程序中的其他场景失败。

我想在用户单击按钮时将上述 html 内容导出到 PDF，问题是当我尝试从 html 页面获取值时，如下面的 js 代码所示，仅导出第一个迭代数据我希望将整个数据导出到 PDF。

js代码：

$scope.export = function() {
   var pdf = new jsPDF('landscape');
    source = $('.one1');
    pdf.addHTML(source, 0, 0, {
        pagesplit: true
    },function(dispose){
        pdf.save('test.pdf');
    });
}

请找上述场景的demo：https://plnkr.co/edit/6jNIu5c26ACeTPsfACX2?p=preview

关于如何将动态生成的 ID 传递给 js 代码并将整个 html 数据导出为 PDF 的任何建议？有没有办法将动态生成的ID传递给js代码并将整个数据导出到PDF。

PS：我不应该将上面的 html 代码包含在另一个 div 中，因为它会使我的应用程序中的其他场景失败。

【问题讨论】：

标签： javascript jquery html angularjs jspdf

【解决方案1】：

使用类 myDivClass 来获取您的数据，而不是使用 id 属性。

您可以使用 jQuery .each() 获取所有数据。

将追加源 div 添加到 html

<body>
  <div ng-controller="listController">
        <button ng-click="export()">export</button>

   <div id="{{value.pageIndex}}" ng-repeat="(key, value) in employees" class="myDivClass">
    <div>  <h1><font color="red"> {{value.pageHeader}}</font></h1> </div>
    <div><h1> {{value.pageIndex}}</h1></div>
    <div>text from html page</div>
   </div>

  </div>
  <div id="append-source"></div>
</body>

使用这个 div 在 JavaScript 中创建 pdf

$scope.export = function() {
   var pdf = new jsPDF('landscape');
   var source = $('#append-source');
    $('.myDivClass').each(function(){
      var html = $(this);
      source.append(html);
    });
    console.log(source);
    pdf.addHTML(
          source, 0, 0, {
              pagesplit: true
          },
          function(dispose){
              pdf.save('test.pdf');
          }
      );
     }

【讨论】：

能否修改plnkr.co/edit/6jNIu5c26ACeTPsfACX2?p=preview.我刚刚更新了上面帖子中的链接，谢谢。
@user8838953 抱歉...我从未使用过 plunker，但我想你快到了。我认为您只需将 source = $('.myDivClass') 更改为 source = $('.myDivClass').each();
我用过但出现错误，它说'无法读取未定义的属性调用'
@user8838953 Plunker 很酷。我想我成功了。您需要向 html 添加另一个 div，您可以将数据附加到该 div，然后使用该 div 创建您的 pdf。我将代码添加到答案中。
太棒了，感谢您的输入..我对上面的代码还有一些其他问题，我现在将发布问题..