有什么将网页转换为 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

7561 次点击
所在节点    奇思妙想
35 条回复
woshilala1988
2017-02-13 11:32:08 +08:00
php 有个类可以调用,我们公司一直在用,很稳定
helloccav
2017-02-13 11:34:28 +08:00
@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
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
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 好嘞我去看看
lzjun
2017-02-13 14:36:39 +08:00
lxrmido
2017-02-13 15:24:14 +08:00
mark
ecmadao
2017-02-13 17:07:10 +08:00
@lzjun 看了你的文章,我觉得如果你的需求主要是获取 http 请求的 body 的话,就没必要用 BS4 了(因为匹配 DOM 的逻辑并不复杂),太重。不过我主要困惑的是,不知道 wkhtmltopdf 保存的结果能否保留页面上较复杂的 CSS 样式?
wellsc
2017-02-13 17:26:38 +08:00
f12 打开 dev tools , console 里面输入 print();
done
hehe00
2017-02-13 17:32:11 +08:00
@woshilala1988 请问 word(.doc .docx)转 PDF 或 HTML,有什么办法吗
ecmadao
2017-02-13 18:26:16 +08:00
@LucasW

看了下文档,它是将静态的 HTML 文件转为 PDF ,而且允许往 HTML 里面插入一个 CSS 和一个 JS 文件?
但是有一个 issue 说它不能够插入多个资源文件,而且作者也表示确实不支持也没时间做 Orz
ecmadao
2017-02-13 18:27:23 +08:00
@wellsc 可惜对页面样式的支持很差,不然我也就采纳这种方法了。

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

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

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

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

© 2021 V2EX