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?
You can write this:
page.paperSize = {
format: 'A4',
orientation: 'portrait',
margin: {
top: '1cm',
left: '1,6cm',
right: '1,6cm',
bottom: '1cm'
}
};
it helped me.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With