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

【问题标题】：How to create different A4 page with phantomjs如何使用 phantomjs 创建不同的 A4 页面
【发布时间】：2014-02-21 03:46:08
【问题描述】：

我尝试使用 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 页面永远不会 100% 适合 pdf 页面。它们每次都变小。如果我将 zoomFactor 设置为 1.249，则页面几乎 100% 适合内部。但不知何故，这个解决方案很奇怪。我该如何解决这个问题？

【问题讨论】：

标签： css pdf phantomjs

【解决方案1】：

你可以这样写：

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

它帮助了我。

【讨论】：