内部でwebkitを使用するPhantom JSに基づくhttps://www.npmjs.com/package/html-pdfライブラリを使用しています。ダミーの 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 での出力
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 にオーバーライドする
- ヘッダーに固定の高さを与える
どんな助けでも大歓迎です。ありがとう。