CODEWITHSUNDEEP
phpcsslaraveldompdf
Jonathan Solorzano
Jonathan Solorzano

Reputation: 7022

How to print page number and set page border to pdf using dompdf

I'm currently using a wrapper of dompdf for laravel to generate my pdfs, but i would like to print the page number and also add margins to the page, how could i do that?

I've tried this without success:

@page {

    margin: 0.5in 0.25in;

}

Upvotes: 0

Views: 5284

Answers (1)

BrianS
BrianS

Reputation: 13914

Your CSS should set a margin around the page between the edge of the page and the document body. If what you want is for that space to be styled in some manner (a border as defined by CSS) you would normally try something like the following:

@page { margin: 0in; }
body { padding: .5in; border: 2in solid orange; }
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Which doesn't work currently. So we have to hack around the issues by defining a page margin and placing a framing element inside that margin:

@page { margin: 2.5in; }
.page-border { position: fixed; left: -2.5in; top: -2.5in; bottom: -2.5in; right: -2.5in; border: 2in solid orange; }
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
  <div class="page-border"></div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Showing the current page number is just requires a bit of CSS:

.page-number:before  {
  content: counter(page);
}
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
  <p>Current Page: <span class="page-number"></span></p>
</body>
</html>

Upvotes: 1

Related Questions