HTML-PDF npm库在Windows和Ubuntu上输出不同

Question

HTML-PDF npm库在Windows和Ubuntu上输出不同

node.jswebkitphantomjspdfrendererpdf-rendering

12

我正在使用基于Phantom JS的https://www.npmjs.com/package/html-pdf库，它内部使用webkit。我将虚拟HTML和JS代码(请将这些文件放在一个文件夹中)，并附上输出截图。

我遇到的问题是，在Windows上生成的PDF文件顶部有一些额外的空间(红色上方的空白) ，我无法摆脱。

这里有一个过时的论坛讨论类似的问题：https://groups.google.com/forum/#!topic/phantomjs/YQIyxLWhmr0。

input.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <div id="pageHeader" style="border-style: solid;border-width: 2px;color:red;">
        header   <br/> header       <br/> header   <br/> header
    </div>
<div id="pageContent" style="border-style: solid;border-width: 2px;color:green;">
    <div>
        body    <br/> body    <br/> body
    </div>
</div>

JS（您需要path、fs、handlebars和html-pdf的npm软件包）

var path = require('path');
var fs = require('fs');
var handlebars = require('handlebars');
var pdf = require('html-pdf');

saveHtml();

function saveHtml() {

fs.readFile('input.html', 'utf-8', {
    flag: 'w'
}, function(error, source) {
    handlebars.registerHelper('custom_title', function(title) {
        return title;
    })

    var template = handlebars.compile(source);
    var data = {};
    var html = template(data);

    var options = {
        'format': 'A4',
        'base': "file://",
        /* You can give more options like height, width, border */
    };
    pdf.create(html, options).toFile('./output.pdf', function(err, res) {
        if (err) {
            console.log('err pdf');
            return;
        } else {
            console.log('no err pdf');
            return;
        }
    });
});

}

在Ubuntu上的输出

在Windows上的输出

Windows中顶部额外的空间（红色框上方的空白）是问题所在。

未奏效的方法 1. 在JS文件的选项中添加 "border": { "top": "0px" // 或者mm、cm、in }

https://www.npmjs.com/package/html-pdf#options

在JS文件的选项中给定固定的 "height": "10.5in" & "width": "8in"
将pageHeader div的margin-top和padding-top设置为0px/-50px。
在bootstrap.css的@media print中覆盖body的margin-top和padding为0px/-20px
给页眉（header）指定固定的高度

非常感谢任何帮助。谢谢。

- Pranav Mahajan

3个回答

1

我通过删除ID，使所有内容被视为内容而不是单独的标题和内容区域，从而获得了更一致的结果。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <div style="border-style: solid;border-width: 2px;color:red;">
            header
        </div>
        <div style="border-style: solid;border-width: 2px;color:green;">
            <div>
                body
            </div>
        </div>
    </body>
</html>

如果您需要一个用于样式的ID，请使用其他名称而不是pageHeader/pageFooter，以避免与这些ID相关联的特殊处理。

- kicken

0

你尝试过使用标准化样式表来解决跨平台差异吗？

https://necolas.github.io/normalize.css/

- colonelclick

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cristian Ricardo Barusta Sanch · Accepted Answer

你可以手动设置HTML标签的CSS属性。在我的情况下，我在Windows上开发模板并将其部署到Linux（Heroku）时遇到了一些问题。

我在标签HTML中添加了zoom: 0.7，现在两个视图看起来都一样。

html{zoom: 0.7;}