我正在开发 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 代码所示，仅导出第一个迭代数据，其中 as我希望将整个数据导出为 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 中，因为它会使我的应用程序中的其他场景失败。
最佳答案
使用类 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');
}
);
}
关于javascript - js代码获取动态生成的div ID，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46990192/