12

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

我面临的问题是，在 Windows 上生成的 PDF 顶部有一些额外的空间（红色上方的空白空间），我无法摆脱.

这是一个讨论类似问题的论坛（过时），https://groups.google.com/forum/# !topic/phantomjs/YQIyxLWhmr0 。

输入.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 上输出 在 ubuntu 上输出

窗口输出 在此处输入图像描述

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

不起作用的事情 1. 在 JS 文件中的选项中添加 "border": { "top": "0px" // 或 mm, cm, in }

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

  1. 在 JS 文件的选项中给出固定的 "height": "10.5in" & "width": "8in"

  2. 将 margin-top 和 padding-top 设置为 0px/-50px 到 pageHeader div。

  3. 在 bootstrap.css 中的 @media print 中将主体的边距顶部和填充覆盖为 0px/-20px
  4. 为标题提供固定高度

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

4

3 回答 3

14

您可以手动将 CSS 属性设置为 html 标签。就我而言，我在 Windows 中开发模板并将其部署到 Linux (Heroku) 时遇到了问题。

我zoom: 0.7输入了标签 html，现在两个视图看起来都一样。

html{zoom: 0.7;}
于 2016-08-31T00:10:48.850 回答
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 相关的特殊处理。

于 2016-06-25T02:03:53.150 回答
0

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

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

于 2016-06-26T04:51:53.147 回答