有什么将网页转换为 PDF 的方法?

2017-02-13 11:02:02 +08:00
 ecmadao

如题,想请教 V 友们有什么办法可以将网页转换为 PDF 吗?

经过调研,我目前发现的方法如下(使用 Node ):

这是我尝试的目前效果最好的方法,可以直接自行封装一个脚本,由前端调用 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();
    });

目前为止,还没有发现什么用起来非常爽的方法,所以求广大 V 友共同讨论 Orz

7390 次点击
所在节点    奇思妙想
35 条回复
LucasW
2017-02-14 12:16:51 +08:00
@ecmadao 你的需求是什么样的?

看我这边的项目, https://github.com/Lucassssss/Writer
是直接转换 html 内容为 pdf ,而且可以给转换的内容自己定义不同的样式。
boxz
2017-02-14 23:36:10 +08:00
wkhtmltopdf 你可以试试
goodryb
2017-02-15 13:35:55 +08:00
@wellsc #17 command+p 不是更快么
dphdjy
2017-02-15 18:35:52 +08:00
DOM 乱可以手动改啊,改完了再打印
marsLeo
2017-02-16 01:37:05 +08:00
刚好看到阮老师的微博,有相关内容
http://weibo.com/1400854834/EvGeSvGFM
hehe00
2017-02-17 09:27:14 +08:00
倒是有 word 转 PDF 的
ecmadao
2017-02-20 08:38:24 +08:00
@boxz 好的谢谢,好像很多人推荐。等忙完这段时间了我去好好研究一下
ecmadao
2017-02-20 08:38:57 +08:00
@marsLeo 打印功能的话,对于复杂度较高的 DOM 而言体验不好
xiaoluoboding
2017-02-20 14:03:48 +08:00
不应该是 pdf.js 吗、。? https://github.com/mozilla/pdf.js
ctftemp
2017-02-20 19:30:49 +08:00
你直接用 node 调用 phantomjs 不就可以吗? phantomjs-node 的原理也是启动了一个 phantomjs 子进程与之交互。至于速度问题,你用别的浏览器不见得效率能更高。
ctftemp
2017-02-20 19:33:07 +08:00
@ecmadao wkhtmltopdf 的话,和 phantomjs 一样用的是 webkit 内核,按理说不会更快。我没对比过,你可以试试。
oldj
2017-02-21 13:35:09 +08:00
wkhtmltopdf 应该是一个很好的选择。

和 phantomjs 相比,它的优点之一是输出的 PDF 支持目录( TOC )。
20015jjw
2017-02-21 18:45:27 +08:00
cmd + p ?
Khlieb
2017-02-21 20:55:01 +08:00
有些虚拟打印机也能把网页做成 PDF ,就是通过浏览器的打印功能来调用的,比如 CutePDF 、 doPDF 、 PDFCreator
spice630
2017-02-23 17:13:08 +08:00

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/340053

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX