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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个专门讨论 idea 的地方。

每个人的时间，资源是有限的，有的时候你或许能够想到很多 idea，但是由于现实的限制，却并不是所有的 idea 都能够成为现实。

那这个时候，不妨可以把那些 idea 分享出来，启发别人。

这是一个创建于 2819 天前的主题，其中的信息可能已经有所发展或是发生改变。

如题，想请教 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();
}());

node-webshot

生成网页截屏。但只能是 png 、 jpg 、 jpeg 形式，且无法滚屏截图，只能指定图片高度或者按照窗口大小截取（目前没有找到合适的方式）

// demo
var webshot = require('webshot');

webshot('google.com', 'google.png', function(err) {
  // screenshot now saved to google.png
});

node-html-pdf

暂时还没有尝试，看见在 stackoverflow 上有人推荐，也有人反馈说该库有很奇怪的 bug

dom-to-image

相对于上面的方法，该库是在前端调用，将一个指定的 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
- phantomjs
- window.print()
- htmltocanvas 或者 rasterizeHTML，然后 jsPDF
- node-html-pdf

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

第 1 条附言 · 2017-02-13 17:17:22 +08:00

有很多 chrome 插件可以将页面转为 PDF，但无法完成自动化。我目前用的最好的插件是这个：FireShot，但是它是在自己的 server 上生成的 PDF ，无法查看具体实现，而官方的 API 的话使用是要收费的。

第 2 条附言 · 2017-02-13 18:29:54 +08:00

的确会有很多方法，如果只是我自己使用的话是完全可行的，比如 `window.print()` 一下，或者使用 chrome 插件什么的。但是我想和大家讨论的是一种可以开发出来放到生产环节下的方法，能够让其他用户正常使用。

35 条回复 • 2017-02-23 17:13:08 +08:00

woshilala1988

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

php 有个类可以调用，我们公司一直在用，很稳定

helloccav

2017-02-13 11:34:28 +08:00 via Android

@woshilala1988 求下载地址。对中文的支持好吗？

shoaly

2017-02-13 11:36:07 +08:00

composer require barryvdh/laravel-dompdf:^0.6.0

qooweds

2017-02-13 11:51:49 +08:00

自己用的话
chrome 的话可以在打印里面另存为 PDF,或者找找插件

chloerei

2017-02-13 12:03:16 +08:00 via iPhone

http://wkhtmltopdf.org/

mmzer

2017-02-13 13:07:47 +08:00

chorme 的打印挺好用的

irainsoft

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

Chrome 各种网页截屏插件不行吗？

LucasW

2017-02-13 13:18:38 +08:00

https://github.com/bauhausjs/phantom-html2pdf

试试这个

ecmadao

2017-02-13 13:44:47 +08:00

@qooweds chrome 的打印对于以文本为主的页面来说挺好的，不过如果自定义的 DOM 很多页面偏复杂的话，布局会乱

ecmadao

2017-02-13 13:45:09 +08:00

@mmzer 对。。但是如果自定义的 DOM 很多页面偏复杂的话，布局会乱

ecmadao

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

@irainsoft 可以啊，但是插件无法完成自动化，也不能嵌入到自己的网站上，让别人来生产 PDF 。我目前用的最好的插件是这个：[FireShot]( https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg)，但是它是在自己的 server 上生成的 PDF ，无法查看具体实现，官方的 API 的话使用是要收费的

ecmadao

2017-02-13 13:47:55 +08:00

@chloerei 好像见过这个，但是没具体使用过，我去研究研究

ecmadao

2017-02-13 13:48:10 +08:00

@LucasW 好嘞我去看看