如题,想请教 V 友们有什么办法可以将网页转换为 PDF 吗?
经过调研,我目前发现的方法如下(使用 Node ):
利用 phantom.js 的 render
phantomjs-node,对 phantom.js 进行了一层封装
这是我尝试的目前效果最好的方法,可以直接自行封装一个脚本,由前端调用 API 后触发。但渲染速度不尽人意,不过也应该有一些优化的空间。
// demo
const phantom = require('phantom');
(async function() {
const instance = await phantom.create();
const page = await instance.createPage();
await page.property('viewportSize', {width: 1024, height: 600});
const status = await page.open('https://stackoverflow.com/');
console.log(`Page opened with status [${status}].`);
await page.render('stackoverflow.pdf');
console.log(`File created at [./stackoverflow.pdf]`);
await instance.exit();
}());
生成网页截屏。但只能是 png 、 jpg 、 jpeg 形式,且无法滚屏截图,只能指定图片高度或者按照窗口大小截取(目前没有找到合适的方式)
// demo
var webshot = require('webshot');
webshot('google.com', 'google.png', function(err) {
// screenshot now saved to google.png
});
暂时还没有尝试,看见在 stackoverflow 上有人推荐,也有人反馈说该库有很奇怪的 bug
相对于上面的方法,该库是在前端调用,将一个指定的 DOM 转为 base64 格式的图片,并可以保留其样式。但缺点很明显,由于是前端使用,在 DOM 数目较多时会有明显的卡顿,体验不好。
// demo
domtoimage.toJpeg(document.getElementById('my-node'))
.then(function (dataUrl) {
var link = document.createElement('a');
link.download = 'my-image-name.jpeg';
link.href = dataUrl;
link.click();
});
stackoverflow 上的讨论 - HTML to PDF with Node.js
目前为止,还没有发现什么用起来非常爽的方法,所以求广大 V 友共同讨论 Orz
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.