html-pdf npm庫在windows和ubuntu上提供不同的輸出

Question

我正在使用https://www.npmjs.com/package/html-pdf庫，該庫基於Phantom JS ，內部使用webkit 。 我正在粘貼虛擬HTML和JS代碼（將這些文件保存在1個文件夾中）並附加輸出屏幕截圖。

我面臨的問題是， 在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 （你需要路徑，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中頂部的額外空間（紅色上方的空白區域）是個問題。

那些沒有用的東西 1.在JS文件中添加“border”：{“top”：“0px”//或mm，cm，in}

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

在JS文件的選項中給出固定的“高度”：“10.5in”和“width”：“8in”
將margin-top和padding-top設置為0px / -50px到pageHeader div。
在bootstrap.css的@media print中覆蓋body的top-top和padding到0px / -20px
給頭部固定高度

任何幫助將不勝感激。 謝謝。

Answer 1

您可以手動將CSS屬性設置為html標記。 在我的情況下，我在Windows中開發模板並將其部署到Linux（Heroku）時遇到問題。

我在標簽html中放了zoom: 0.7 ，現在兩個視圖看起來都一樣。

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和ubuntu上提供不同的輸出

問題描述

3 個解決方案

解決方案1
9 2016-08-31 00:10:48

解決方案2
1 2016-06-25 02:03:53

解決方案3
0 2016-06-26 04:51:53

html-pdf npm庫在windows和ubuntu上提供不同的輸出

問題描述

3 個解決方案

解決方案1 9 2016-08-31 00:10:48

解決方案2 1 2016-06-25 02:03:53

解決方案3 0 2016-06-26 04:51:53

解決方案1
9 2016-08-31 00:10:48

解決方案2
1 2016-06-25 02:03:53

解決方案3
0 2016-06-26 04:51:53