如何使用phantomjs创建不同的A4页面

时间:2014-01-29 11:15:03

标签: css pdf phantomjs

我尝试使用phantomjs创建一个pdf文件。此pdf包含多个页面。我用下面的css定义了这个页面:

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

以下是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>

以下是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();
});

但是我的html页面在pdf页面中从不适合100%。他们每次都变小了。如果我将zoomFactor设置为1.249,那么该页面几乎100%适合。但不知何故,这个解决方案很奇怪。我怎么能解决这个问题?

1 个答案:

答案 0 :(得分:1)

你可以这样写:

page.paperSize = {
    format: 'A4',
    orientation: 'portrait',
    margin: {
        top: '1cm',
        left: '1,6cm',
        right: '1,6cm',
        bottom: '1cm'
    }
};
它帮助了我。