Question

我正在使用Node.js和模块phridge（版本1.0.3）来渲染带有PhantomJs的pdf。

我想在页眉和页脚中呈现没有任何边距的pdf。目前我只是发现了一个黑客来删除左右边距，通过左右边距为负。

可以在此处找到使用pagenumbers打印页眉和页脚的示例： https://github.com/ariya/phantomjs/blob/master/examples/printheaderfooter.js

// creates a new webpage internally
var page = phantom.createPage(),
    outputFile = path.join(options.destDir, options.destFile);

/*global window:false */
// page.run(fn) runs fn inside PhantomJS
page.run(html, outputFile, options.header, options.footer, options.delay,
  function (html, outputFile, header, footer, delay, resolve /*, reject*/) {
  // Here we're inside PhantomJS, so we can't reference variables in the scope.
  // 'this' is an instance of PhantomJS' WebPage as returned by require("webpage").create()
  var page = this;

  page.content = html;
  page.viewportSize = { width: 1190, height: 1684 }; // 144dpi

  page.paperSize = {
    format: 'A4',
    header: {
      // How do I set the margin to 0px? margin: 0px or border: 0px doesn't work.
      height: '80px'
      contents: phantom.callback(function (pageNum, numPages) {
        return header.contents.replace(/<%= pageNum %>/g, pageNum).replace(/<%= numPages %>/g, numPages);
      })
    },
    footer: {
      height: '80px'
      contents: phantom.callback(function (pageNum, numPages) {
        return footer.contents.replace(/<%= pageNum %>/g, pageNum).replace(/<%= numPages %>/g, numPages);
      })
    },
  };

  // Wait until JavaScript has run
  window.setTimeout(function () {
    page.render(outputFile, { format: 'pdf', quality: '100' });
    page.close();
    page = null;
    resolve(outputFile);
  }, delay);

我使用负边距删除了左右边距边距。为此，我使用内联样式。例如，当 header.contents 为：

时

<div style="background-color: rgb(230, 231, 232);margin:-20px;height:80px;">
  <img style="text-align:center" src="file:///C:/image.png" alt="image">
</div>

在早期尝试删除我在内部CSS样式表后面包含的边距。不幸的是，似乎没有应用这种风格。在其他地方，我读到这种行为的原因是在使用phantom.callback（）时只应用了内联样式。

<style type="text/css">
  @page {
    margin: 0;
  }
  * {
    margin: 0px;
    padding: 0px;
  }
  body {
    margin: 0px;
  }
</style>

如何删除页眉和页脚的顶部和底部边距？

感谢阅读！

Answer 1

事实证明，在不同的平台（Linux，Windows）上，页眉和页脚的呈现方式不同，因为dpi是不同的。

以下是对它的讨论：https://groups.google.com/forum/#!topic/phantomjs/YQIyxLWhmr0

根据平台更改 zoomFactor ，删除了白色空白：

page.zoomFactor = (PLATFORM === 'linux'?  0.654545: 0.9)

Answer 2

请尝试使用以下CSS来处理您要渲染为pdf的html文件：

body {
    padding: 0;
    margin: 0;
}

似乎是另外body在顶部和底部有一些填充＆＃34;默认情况下＆＃34;。

渲染pdf时，PhantomJs将标题边距设置为0

2 个答案: