Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create different A4 page with phantomjs

Tags:

css

pdf

phantomjs

I try to create a pdf file using phantomjs. This pdf contain multiple pages. I define this pages with the follwing css:

.page{
    height: 210mm;
    width: 297mm;
}
body{ margin: 0; padding: 0; }

And here is an example of html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=11" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" />
        <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
        <link href="{{ asset('/css/main.css') }}" rel="stylesheet" />

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
        <script src="//code.highcharts.com/highcharts.js"></script>
        <script src="//code.highcharts.com/highcharts-more.js"></script>
    </head>
    <body>
      <div class='page'>page1</div>
      <div class='page'>page2</div>
    </body>
</html>

And following is config file for phantomjs:

var page = require("webpage").create();
page.open("http://site.local/pdf/2", function() {
  page.paperSize = { format: "A4", orientation: "landscape" };
  //page.paperSize = { width: "29cm", height: "21cm" };
  //page.zoomFactor = 1.249;

  page.render("example.pdf");
  phantom.exit();
});

But my html pages never fit 100% in the pdf pages. They are every time smaller. If I set the zoomFactor to 1.249, then the page fit almost 100% inside. But somehow this solution is weird. How could I solve this problem?

like image 900
Alexandre Avatar asked Nov 11 '22 14:11

Alexandre


1 Answers

You can write this:

page.paperSize = {
    format: 'A4',
    orientation: 'portrait',
    margin: {
        top: '1cm',
        left: '1,6cm',
        right: '1,6cm',
        bottom: '1cm'
    }
};

it helped me.

like image 71
Michael Skvortsov Avatar answered Nov 15 '22 04:11

Michael Skvortsov