js代码获取动态生成的div ID
问题描述:
我正在研究java和angularjs应用程序。 我有一个HTML页面迭代对象并在页面上显示值。js代码获取动态生成的div ID
的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代码,因为它会辜负我的其他情形在我的应用程序。
我想将上面的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');
});
}
请找到出现上述情况的演示: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
$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');
}
);
}
可否请您修改https://plnkr.co/edit/6jNIu5c26ACeTPsfACX2?p=创建PDF预习。我刚刚更新了我上面的帖子中的链接,谢谢。 – user8838953
@ user8838953对不起......我从来没有使用过沉重的东西,但我认为你快到了。我认为你只需要将source = $('。myDivClass')更改为source = $('。myDivClass')。each(); –
我用,但出现错误,它说'不能读取未定义的属性调用' – user8838953