I am trying to create a pdf file using phantomjs. This pdf contains several pages. I define these pages using css:
.page{
height: 210mm;
width: 297mm;
}
body{ margin: 0; padding: 0; }
And here is the html example:
<!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 the following configuration file for phantomjs:
var page = require("webpage").create();
page.open("http://site.local/pdf/2", function() {
page.paperSize = { format: "A4", orientation: "landscape" };
page.render("example.pdf");
phantom.exit();
});
But my html pages never fit 100% in pdf pages. They are smaller each time. If I set zoomFactor to 1.249, then this page would fit almost 100% inside. But for some reason this decision is strange. How can I solve this problem?
source
share