javascript - 迭代在网页上显示的逻辑

Question

我有一个对象列表，在获取对象的每个元素时，我想将每个元素导出到 PDF 内的各个页面。

我通过迭代列表对象来获取数据(例如$scope.employees)。目前，当用户单击导出按钮时，数据将导出为 PDF。我的要求是迭代时的每个对象都应存储在 PDF 的各个页面中。例如，带有 pageHeader 的对象“这显示在第 1 页”应该显示在第 1 页，“这显示在第 2 页”打开时应该显示在 PDF 的第 2 页等...
任何对此的建议将不胜感激。

请在此处找到 plunker 演示:https://plnkr.co/edit/HvKipjWCYsgujJOv6You?p=preview

在迭代 $scope.employees 时是否需要使用 pageSplit:true 选项，任何输入？

js代码:

$scope.export = function(){
alert("in pdf export");
var pdf = new jsPDF('landscape');
var width1 = pdf.internal.pageSize.width;
var height = pdf.internal.pageSize.height;

var source = "";
$scope.employees.forEach(function(value){
    source+= value.pageHeader + "\n" +"\n";
})
specialElementHandlers = {
    // element with id of "bypass" - jQuery style selector
    '#bypassme': function (element, renderer) {
        // true = "handled elsewhere, bypass text extraction"
        return true
    }
};
margins = {
    top: 80,
    bottom: 60,
    left: 10,
    width: '100%'
};
// all coords and widths are in jsPDF instance's declared units
// 'inches' in this case
pdf.fromHTML(
    source, // HTML string or DOM elem ref.
    margins.left, // x coord
    margins.top, { // y coord
        'width': width1, // max width of content on PDF
        'elementHandlers': specialElementHandlers
    },
    function (dispose) {
        // dispose: object with X, Y of the last line add to the PDF
        //          this allow the insertion of new lines after html
        pdf.save('test.pdf');
    },
    margins
);

Answer 1

只需使用 <!--ADD_PAGE--> (ADD_PAGE 带有注释的 Angular <> 大括号)从您想要新页面的位置开始，例如

source+= "<div>"+value.pageHeader + "</div><!--ADD_PAGE-->";

Working fiddle