1

I have a list of object, while getting each element of the object, I want to export each to individual pages inside the PDF.

I am getting the data by iterating the list object(eg. $scope.employees). Currently when a user clicks on export button, the data is exported to the PDF. My requirement is each object while iterating should be stored in the individual pages of the PDF. Like for example the object with pageHeader "This is shown in page1" should be shown in page1, "This is shown in page2" should be shown in page2 of the PDF when opened etc...
Any suggestions on this would be appreciated.

Please find a plunker demonstration here: https://plnkr.co/edit/HvKipjWCYsgujJOv6You?p=preview

Do I need to use pageSplit:true option while iterating the $scope.employees, any inputs?

js code:

$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
);
user8838953
  • 57
  • 8
  • Is this answered in this question: https://stackoverflow.com/questions/35254465/how-can-i-add-div-content-to-a-new-page-in-jspdf ? – Anthropic Oct 27 '17 at 04:44

1 Answers1

0

Just use <!--ADD_PAGE--> (ADD_PAGE with in commented angular <> braces) from where you want new page something like 

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

Working fiddle

jitender
  • 10,238
  • 1
  • 18
  • 44
  • How to show from starting page, the content is shown from the middle of the page when used source+= "
    "+value.pageHeader + "
    "; https://plnkr.co/edit/qpSdbHahRGPSfUVfoReB?p=preview and some of the words towards end of the line are not displayed on PDF may be that is pagelayout issue. Please advice.@jitender     – user8838953 Oct 27 '17 at 10:58
  • this is becuse you are using `margins = { top: 80, bottom: 60, left: 10, width: '100%' }` change this to `margins = { top: 20, bottom: 10, left: 10, width: '100%' }` – jitender Oct 27 '17 at 11:09
  • I have another issue when exporting the content to PDF , i have raised it here https://stackoverflow.com/questions/46975933/not-showing-the-html-content-as-expected . Any inputs if possible would be helpful.@jitender – user8838953 Oct 27 '17 at 13:29