'how to detect the first page on jsPDF

how can I detect/condition on the first page on jsPDF??

I want to detect the first page so I can apply top margin only on the first page and not on the next pages. So that I can then add my header using .text() method statically.

heres my current code:

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <title></title>

{{ HTML::script("js/jspdf/js/jquery/jquery-1.7.1.min.js")}}
{{ HTML::script("js/jspdf/js/jquery/jquery-ui-1.8.17.custom.min.js")}}
{{ HTML::script("js/jspdf/js/libs/polyfill.js")}}
{{ HTML::script("js/jspdf/jspdf.js")}}
{{ HTML::script("js/jspdf/js/libs/deflate.js")}}
{{ HTML::script("js/jspdf/js/libs/adler32cs.js/adler32cs.js")}}
{{ HTML::script("js/jspdf/js/libs/FileSaver.js/FileSaver.js")}}
{{ HTML::script("js/jspdf/js/libs/Blob.js/Blob.js")}}
{{ HTML::script("js/jspdf/jspdf.plugin.standard_fonts_metrics.js")}}
{{ HTML::script("js/jspdf/jspdf.plugin.split_text_to_size.js")}}
{{ HTML::script("js/jspdf/jspdf.plugin.addimage.js")}}
{{ HTML::script("js/jspdf/jspdf.plugin.cell.js")}}
{{ HTML::script("js/jspdf/jspdf.plugin.from_html.js")}}


</head>
<body>



  <div style="border-width: 2px; border-style: dotted; padding: 1em; font-size:120%;line-height: 1.5em;" id="fromHTMLtestdiv">
<div>
 <br>
 <br>
 <br>
</div>

<table>
 <colgroup>
 <col width="10%">
 <col width="30%">
 <col width="40%">
 <col width="10%">
 <col width="10%">
</colgroup>
<thead>
<tr>
  <th>id</th>
  <th>item name</th>
  <th>description</th>
  <th>price</th>
  <th>qty</th>
  <th>subtotal</th>
</tr>
</thead>
<tbody>

@for ($x=0; $x < 20; $x++)  


@foreach ($items as $item => $value)
<tr>

<td>{{$value->itemId}}</td>
<td>{{$value->itemName}}</td>
<td>{{$value->description}}</td>
<td>{{$value->itemPrice}}</td>
<td>{{$value->quantity}}</td>
<td>{{$value->quantity*$value->itemPrice}}</td>

</tr>
@endforeach

@endfor
</tbody>

</table>



 </div>
 <div>

 <button onclick="javascript:demoFromHTML()" class="button">Run Code</button></p></div></div>

</div>
</div>


<script>
$(document).ready(function() {

 demoFromHTML();
});




function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'letter')

pdf.setFontSize(16)
pdf.text(40, 60, 'Doe, John Smith')
pdf.setFontSize(12)
pdf.text(40, 72, '795 Folsom Ave, Suite 600')
pdf.text(40, 84, 'San Francisco, CA 94107')
pdf.text(40, 96, '(123) 456-7890')
, source = $('#fromHTMLtestdiv')[0]

// we support special element handlers. Register them with jQuery-style 
// ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
// There is no support for any other type of selectors 
// (class, of compound) at this time.
,  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: 40,
  width: 522
};
// 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': margins.width // 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

 )
}

 </script>

</body>
<footer>
</footer>
</html>

the code above generates this pdf: enter image description here

I tried increasing the value of margin-top but it affects all pages :/

I tried adding <br>s at the top but its not working too. any help would really be appreciated! thank you for your time. If theres unclear or you need more info just comment below.! have a nice Day!

javascriptjquerycssjspdf


Solution 1:[1]

The question may be too old to answer, but you can detect the page number through an internal method as shown below:

let doc = new Pdf();
let pageInfo = doc.internal.getCurrentPageInfo();
console.log(pageInfo.pageNumber) // Logs your current page number.

Solution 2:[2]

I'm not sure it is possible to detect the current page number, maybe in a plugin, but jsPDF API has a function called setPage. So you could just select the first page instead of trying to detect it.

Note that setPage() uses one-based indexing.

pdf.setPage(1);

Solution 3:[3]

Instead of

 margin: { top: 45 },

You should put (margin for the first page), according to docs

 startY: 45,

Full example

autoTable(doc, {
        theme: 'striped',
        startY: 45,
        margin: { left: 5, right: 5 },
        columns: [
          { header: 'Name', dataKey: 'name' },
          { header: 'Title', dataKey: 'title' },
          ...
        ],
        body: products,
})

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 hwkd
Solution 2
Solution 3 illia chill

Related Questions