CODEWITHSUNDEEP
jspdf
knnhcn
knnhcn

Reputation: 1151

jsPDF change page format

I have a function to set a footer on a page. But I want to make the code more flexible and add an if statement where I want it to set the footer on a different position when the document is an 'a4' or a3'.

function footer(){
    doc.setFontSize(11);
    doc.text(180,280, 'Seite ' + doc.page);
    doc.page ++;
    }

But I can't find the paramater to change the format after the page has been initiated:

var doc = new jsPDF('p', 'mm', 'a4');

I tried:

doc.format('a3');
doc.setFormat = 'a3';
doc.setPageFormat('a3');

but none works.

Does someone know the paramater to change page format anywhere in the code even after "new jsPDF" initiation? Or does this simply not work?

Thanks in advance!

Upvotes: 1

Views: 24896

Answers (4)

Baseer Ebadi
Baseer Ebadi

Reputation: 173

First Create button with link to the function, then declare the Chart it self and finally set the JS function, please follow the steps carefully, thanks.

Note: the 'p' is the layout, which mean portrait, so you can use 'l' for landscape

Step#1: Create the Button.

 <button onclick="pipeCharttPDF('PiechartID','PDF_file_name','p')" class="btn btn-sm btn-info">PDF
</button>

Step#2: Declare the Chart

<div class="card">
  <div class="card-header" style="font-size:20px;">
     <label for="Piechart">Pie Chart</label>
   </div>
   <div class="card-body">
       <canvas id="PiechartID"></canvas>
   </div>
 </div>

Step#3: Declare the function().

<script type="text/javascript">
    function pipeCharttPDF(id, name, layout) {
            html2canvas(document.getElementById(id), {
                onrendered: function(canvas) {
                    var img = canvas.toDataURL(); //image data of canvas
                    var doc = new jsPDF(layout,'mm','a4');
                    doc.addImage(img, 10, 10);
                    doc.save(name + '.pdf');
                }
            });
        }
    </script>

Upvotes: -1

Shmack
Shmack

Reputation: 2321

I also noticed that if you have 1 page (I'm not entirely sure how it works for more than 1 page. I will get to that...), that you can use your jsPDF object you created and run the setWidth(); or setHeight(); methods via doc.internal.pageSize.setWidth(some number); and like wise for height.

While I was digging around in those methods, I noticed that while setWidth and setHeight take only one parameter, to update the object it requires 2 parameters to be passed to another method inside of setWidth and setHeight respectively. Specifically, the number passed to setWidth or setHeight and the page number to change. I am new to jsPDF (and I only need it for a basic task, so I'm probably not going to dive to deep into this), so I am not sure if it works like this, but I guess you can set the current page you are working on (maybe accessible via doc.internal.pages['some page'] or doc.page ++;), which might be useful to someone...

Not saying this is profound, but it might be useful to someone.

Upvotes: -1

IflairHitesh
IflairHitesh

Reputation: 9

  /* -----------PDF GENERATE--------- */
  @ViewChild('reportContent') reportContent: ElementRef;
  downloadPdf() {
    const doc = new jsPDF('l', 'mm', 'a3');

    const specialElementHandlers = {
      '#editor': function (element, renderer) {
        return true;
      }
    };
    const content = this.reportContent.nativeElement;
    doc.fromHTML(content.innerHTML, 15, 10, {

      'width': 100,
      'elementHandlers': specialElementHandlers
    });
    doc.save('ReminderReport' + '.pdf');
  }

Upvotes: -1

zameb
zameb

Reputation: 840

You can set format and orientation on each new page:

doc.addPage('a3', 'portrait');

Orientation is either 'portrait' or 'landscape'

Alternately you can also set the height and widht:

doc.addPage(newWidth, newHeight);

In this case the units will be the same as in your jsPDF instantiation ('mm'):

var doc = new jsPDF('p', 'mm', 'a4');

Upvotes: 9

Related Questions