Question

我正在研究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 code：

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

请查看上述方案的演示：https://plnkr.co/edit/6jNIu5c26ACeTPsfACX2?p=preview

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

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

Answer 1

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

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

将append-source 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');
          }
      );
     }

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

1 个答案: