apo*_*fos 19 javascript google-chrome google-chrome-headless
我正在尝试使用Google Chrome替代PhantomJS将HTML呈现为PDF.到目前为止,它对我来说一直很好.我唯一的问题是我没有找到任何方法来翻译以下PhantomJS代码:
page.paperSize = {
footer: {
contents: phantom.callback(function(pageNum, numPages) {
return "Power by MyWebsite. Created on "+formatDate(new Date())+"<span style='float:right'>" + pageNum + " / " + numPages + "</span>";
})
}
}
格式化日期与问题中的函数相同如何格式化JavaScript日期
但是,我还没有找到一种方法来在谷歌Chrome中无头复制这种行为.我正在使用来自https://github.com/cyrus-and/chrome-remote-interface的 Chrome远程接口(CDP)
这是我的chrome远程接口代码的概述:
return new Promise(async function (resolve, reject) {
const url = "<MyURL here>";
const [tab] = await Cdp.List()
const client = await Cdp({ host: '127.0.0.1', target: tab });
await Promise.all([
Network.enable(),
Page.enable()
]);
Page.loadEventFired(function () {
setTimeout(function () {
resolve(Page.printToPDF({displayHeaderFooter:true}))); //https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-printToPDF
}, 3000);
});
await Page.navigate({ url });
};
我得到的PDF很好,但只能获得默认的Chrome页眉和页脚.有什么方法可以修改它们？
注意:我意识到我可以在页面中使用JavaScript将元素附加到每个页面的底部,但我更喜欢在导出/打印时更改浏览器附加的页脚,因为我发现它更可靠正确放置并且不会导致页面中其他div的任何奇怪的重新流动.
Dar*_*all 16
可以使用<header>和<footer>标记创建自定义页眉和页脚.我使用它来使用Chrome Headless生成PDF.我还没有在Firefox,IE等中测试它...
<header>
Custom Header
<img src="http://imageurl.com/image.jpg"/>
</header>
<div class="content">Page Content - as long as you want</div>
<footer>
Footer Content
</footer>
CSS
@page {
margin: 0;
}
@media print {
footer {
position: fixed;
bottom: 0;
}
header {
position: fixed;
top: 0;
}
}
在@page { margin: 0 }删除默认的页眉和页脚.
希望这可以帮助.
apo*_*fos 15
这是对问题的更新/回答.从Chromium 64开始,可以使用headerTemplate和footerTemplate参数来实现printToPDF
使用chrome远程接口这里应该有效的示例代码:
return new Promise(async function (resolve, reject) {
const url = "<MyURL here>";
const [tab] = await Cdp.List()
const client = await Cdp({ host: '127.0.0.1', target: tab });
await Promise.all([
Network.enable(),
Page.enable()
]);
Page.loadEventFired(function () {
setTimeout(function () {
//https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-printToPDF
resolve(Page.printToPDF({
displayHeaderFooter:true,
footerTemplate: "<span class='pageNumber'> of <span class='totalPages'>"
})));
}, 3000);
});
await Page.navigate({ url });
};
您的问题有两种解决方案
A)通过不留余量推出铬标头:
@page {
margin: 0;
size: auto;
}
要么
@media print {
@page { margin: 0; }
body { margin: 1.6cm; }
}
B)最初是一个适用于Chrome的Firefox解决方案
<html moznomarginboxes mozdisallowselectionprint>
一些样本:
<!DOCTYPE html>
<html moznomarginboxes mozdisallowselectionprint>
<head>
<title>Print PDF without header</title>
<style>
@media print {
@page { margin: 0; }
body { margin: 1.6cm; }
}
</style>
</head>
<body>
<p>Some Text in Paragraph to print!</p>
<a href="javascript:print()">Print</a>
</body>
</html>在打印为 PDF 时，您可以使用headerTemplate和footerTemaplate参数来自printToPDF定义页眉和页脚。
headerTemplate并footerTemaplate接受有效的 HTML 标记，您可以使用以下类将打印值注入您的 HTML 元素：
date - 将以可打印格式将当前日期注入包含该类的 HTML 元素中title - 文件名url - 文件位置pageNumber - 当前页码totalPages - 总页数例如，打印页码和总页数：
Page.printToPDF({
displayHeaderFooter: true,
footerTemplate: "<span class='pageNumber'></span> <span>out of</span> <span class='totalPages'></span>"
})
（当时，使用 Chrome DevTools 无法实现这一点。）
根据这个论坛，目前没有办法在谷歌浏览器中做到这一点。您所能做的就是打开或关闭页眉/页脚。这由评论表明：
目前没有办法在打印文档时编辑标题。您目前只能打开或关闭页眉和页脚，其中包括日期、网页名称、页面 URL 以及您正在打印的文档页数。您可能想查看 Chrome 网上应用店，看看是否有任何方便的第三方扩展程序可以安装在 Chrome 上，这些扩展程序可能适合您在打印方面的需求——来源 可能有第三方扩展程序获得您正在寻找的功能，或者按照您的建议，您可以使用 JavaScript 来附加要打印的元素。
| 归档时间： |
|
| 查看次数： |
14234 次 |
| 最近记录： |