How to split the image in pdfMake and insert to multiple pages using AngularJS?

Question

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

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?

Does this answer your question? How to Export HTML to PDF (multiple pages) using jQuery? — Louys Patrice Bessette
– Louys Patrice Bessette, Commented Dec 15, 2020 at 18:24

Aónio · Accepted Answer · 2018-04-24 08:54:48Z

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

answered Apr 24, 2018 at 8:54

Aónio

5791 gold badge4 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mark Over a year ago

here's a sample gist.github.com/Balkoth/d79a520ca2a3377c15e902ec68790aff but it is not in angular and can't read it :(

Aónio Over a year ago

@Mark I don't know angular but I think here is irrelevant. pdfMake just needs javascript.

Mark Over a year ago

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

Aónio Over a year ago

@Mark, really, read the documentation of of drawImage, and then just apply that to your canvas

Collectives™ on Stack Overflow

How to split the image in pdfMake and insert to multiple pages using AngularJS?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related