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

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

css pdf phantomjs

Css 如何使用phantomjs创建不同的A4页面,css,pdf,phantomjs,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"> &l

我尝试使用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>

但我的html页面永远无法在pdf页面中100%显示。它们每次都更小。如果我将zoomFactor设置为1.249，那么页面几乎100%适合内部。但不知怎的，这个解决方案很奇怪。我怎样才能解决这个问题？

你可以这样写：

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

它帮助了我

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