Question

我正在使用https://www.npmjs.com/package/html-pdf库，该库基于 Phantom JS ，内部使用 webkit 。我正在粘贴虚拟HTML＆amp; JS代码（将这些文件保存在1个文件夹中）并附加输出屏幕截图。

我面临的问题是Windows上的生成的PDF顶部有一些额外的空间（红色以上的空白区域），我无法摆脱。< / p>

这是一个讨论类似问题的论坛（过时），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 （你需要路径，fs，把手，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.添加＆＃34; border＆＃34;：{ ＆＃34; top＆＃34;：＆＃34; 0px＆＃34; //或mm，cm，in } 到JS文件中的选项

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

给予固定＆＃34;身高＆＃34;：＆＃34; 10.5in＆＃34; ＆安培; ＆＃34;宽度＆＃34;：＆＃34; 8in＆＃34;在JS文件中的选项
制作margin-top＆amp; padding-top为0px / -50px to pageHeader div。
覆盖margin-top＆amp;在bootstrap.css的@media print中将主体填充为0px / -20px
为标题赋予固定高度

任何帮助将不胜感激。感谢。

Answer 1

您可以手动将CSS属性设置为html标记。在我的情况下，我在Windows中开发模板并将其部署到Linux（Heroku）时遇到了问题。

我将zoom: 0.7放在标签html中，现在两个视图看起来都一样。

html{zoom: 0.7;}

Answer 2

我可以通过移除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相关的特殊处理。

Answer 3

您是否尝试使用规范化样式表来弥补跨平台差异？

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

html-pdf npm库在windows＆amp;上提供不同的输出。 ubuntu的

3 个答案: