Question

最近我正在处理一个涉及html模板的函数。

此功能的作用是生成动态模板，并将其转换为pdf。

到目前为止，我设法像这样做了

var output = '';
async.each(input.contentInfo, function(component, next) {
    renderTemplate(component, function(err, result){ //compile input and template together
        output = output + result; //merge all component's html source code together
        next();
    });
}, function(err) {
    conversion({        //phantom-html-to-pdf function from npm module
        html: output,
        paperSize: {
            format: 'A8', 
            orientation: 'landscape',
            margin: 0,
            headerHeight: 0,
            footerHeight: 0
        }
    }, function(err, pdf) {
        var output = fs.createWriteStream('output.pdf');
        pdf.stream.pipe(output);
    });
});

假设一切正常，因为我没有在示例中显示任何错误检查。

现在，output变量将是这样的

<div style="page-break-before: always;">
    <div style="position:absolute;left:100;top:100;>
        Page 1 Content
    </div>
</div>
<div style="page-break-before: always;">
    <div style="position:absolute;left:100;top:100;>
        Page 2 Content
    </div>
</div>

我希望在html转换为PDF时看到的结果是由page-break CSS引起的2页，但在这种情况下，它并没有。但是如果在没有position: absolute CSS的情况下使用相同的输出，它会按照我的预期工作，但UI不正确。

这种情况有没有解决方案来实现这两个要求？

如果我解释情况不好，任何对此的帮助都会受到赞赏和抱歉。感谢。

Answer 1

npm module文档指示我this page，其中“分页符”部分可以这样说：

Css contains styles like page-break-before you can use to specify html page 
breaks. This can be used as well with phantom-pdf to specify page breaks 
inside pdf files.

    <h1>Hello from Page 1</h1>

    <div style='page-break-before: always;'></div>

    <h1>Hello from Page 2</h1>

    <div style="page-break-before: always;"></div>

    <h1>Hello from Page 3</h1>

简短回答：请尝试page-break-before: always;。

逐页将HTML转换为PDF

1 个答案: