0

At first I thought it is working fine but after a couple of testing, the data became large enough that it won't fit to one page. I researched some questions but it didn't help me enough

so here's my code

html2canvas(document.getElementById(id)).then(function (canvas) {
            document.body.appendChild(canvas);
            var data = canvas.toDataURL();
            var height = canvas.height;
            canvas.remove();
            var docDefinition = {
                content: [{
                    image: data,
                    width: 500,


                }]
            };
            pdfMake.createPdf(docDefinition).download(id+".pdf", function() {
                $scope.balanceSheet = false;
                $scope.mainPage = true;
            });

        });

I have at least 90 rows here but the image was cut at 46 enter image description here

any idea how to split it? I've already tried raising the height but it just fit the whole 90 rows into one page.

The page break showed because I added 

 content: [{
    image: data,
    width: 500,
    pageBreak: 'after',
   }]

Here's a sample how to split it here but I can't read it because it is not angular :( can anyone explain it or convert it?

Mark
  • 293
  • 1
  • 11
  • 25
  • Does this answer your question? [How to Export HTML to PDF (multiple pages) using jQuery?](https://stackoverflow.com/questions/65308280/how-to-export-html-to-pdf-multiple-pages-using-jquery) – Louys Patrice Bessette Dec 15 '20 at 18:24

1 Answers1

0

I don't think you can split images in different pages automatically in pdfmake.

But you may split the canvas beforehand using the method drawImage. Check the parameters of the function and you can split an image vertically on every point you'd like, and then set those two subimages in different pages

Aónio
  • 579
  • 4
  • 13
  • here's a sample https://gist.github.com/Balkoth/d79a520ca2a3377c15e902ec68790aff but it is not in angular and can't read it :( – Mark Apr 24 '18 at 08:55
  • @Mark I don't know angular but I think here is irrelevant. pdfMake just needs javascript. – Aónio Apr 24 '18 at 08:59
  • I just made one with AngularJS. it is just that I can't translate it to the correct syntax for angular since I don't know javascript – Mark Apr 24 '18 at 09:07
  • @Mark, really, read the documentation of of drawImage, and then just apply that to your `canvas` – Aónio Apr 24 '18 at 09:14