用 puppeteer 实现网站自动分页截取的趣事 - Joe’s Blog

hijiangtao commented 4 years ago

https://hijiangtao.github.io/2020/07/22/Play-With-Puppeteer/

最近因为工作中的一个需求，需要针对用户数据页面进行分页并截屏并返回 PDF 文件，期间用到了 puppeteer 与 HTML 分页算法，还找到了一个不错的插件，于是来聊些有趣的事。

jlala commented 4 years ago

分页的是在前端js代码里面进行的吗？

hijiangtao commented 4 years ago

@jlala 分页的是在前端js代码里面进行的吗？

是，拆分 DOM

CodeDaraW commented 4 years ago

挺有意思，我最近也做了一个类似的东西，出发点也很相似，为了 pptr 渲染 PDF 支持分页。不过我的 HTML 不是最终的 HTML，还会过一层渲染逻辑，所以我是直接拆分 HTML 了。HTML 拆分这块做了个库 https://github.com/CodeDaraW/html-splitter 。

hijiangtao commented 4 years ago

@CodeDaraW 挺有意思，我最近也做了一个类似的东西，出发点也很相似，为了 pptr 渲染 PDF 支持分页。不过我的 HTML 不是最终的 HTML，还会过一层渲染逻辑，所以我是直接拆分 HTML 了。HTML 拆分这块做了个库 https://github.com/CodeDaraW/html-splitter 。

从描述上看，我们应该做的是同一件事，我这边也会过渲染逻辑，因为需要拿到渲染后的 html 算布局和重排

CodeDaraW commented 4 years ago

@CodeDaraW 挺有意思，我最近也做了一个类似的东西，出发点也很相似，为了 pptr 渲染 PDF 支持分页。不过我的 HTML 不是最终的 HTML，还会过一层渲染逻辑，所以我是直接拆分 HTML 了。HTML 拆分这块做了个库 https://github.com/CodeDaraW/html-splitter 。

从描述上看，我们应该做的是同一件事，我这边也会过渲染逻辑，因为需要拿到渲染后的 html 算布局和重排

那应该确实是一样的，虽然我的业务背景和你的不太一样，但实现思路其实差不太多，感觉很奇妙哈哈。

hijiangtao commented 4 years ago

@CodeDaraW

@CodeDaraW 挺有意思，我最近也做了一个类似的东西，出发点也很相似，为了 pptr 渲染 PDF 支持分页。不过我的 HTML 不是最终的 HTML，还会过一层渲染逻辑，所以我是直接拆分 HTML 了。HTML 拆分这块做了个库 https://github.com/CodeDaraW/html-splitter 。

从描述上看，我们应该做的是同一件事，我这边也会过渲染逻辑，因为需要拿到渲染后的 html 算布局和重排

那应该确实是一样的，虽然我的业务背景和你的不太一样，但实现思路其实差不太多，感觉很奇妙哈哈。

我们拆分 HTML 主要还是用的 Range API，没考虑太多细节，业务关注点主要还是在「如何平滑的处理各种三方依赖展示」上

CodeDaraW commented 4 years ago

@CodeDaraW

@CodeDaraW 挺有意思，我最近也做了一个类似的东西，出发点也很相似，为了 pptr 渲染 PDF 支持分页。不过我的 HTML 不是最终的 HTML，还会过一层渲染逻辑，所以我是直接拆分 HTML 了。HTML 拆分这块做了个库 https://github.com/CodeDaraW/html-splitter 。

从描述上看，我们应该做的是同一件事，我这边也会过渲染逻辑，因为需要拿到渲染后的 html 算布局和重排

那应该确实是一样的，虽然我的业务背景和你的不太一样，但实现思路其实差不太多，感觉很奇妙哈哈。

我们拆分 HTML 主要还是用的 Range API，没考虑太多细节，业务关注点主要还是在「如何平滑的处理各种三方依赖展示」上

拆分 HTML 这块做这个库也很快，几乎没有多少工作量，主要的工作量在拆分逻辑和原有的业务逻辑做结合，这部分也很有意思，可惜和业务结合太深，无法开源或者将文档分享到外部。

syymo commented 3 years ago

跨度超出是根据什么值来计算超出的呢？如果我现在要实现某些标识符进行分页，但是看的有点迷惑

hijiangtao commented 3 years ago

@syymo 跨度超出是根据什么值来计算超出的呢？如果我现在要实现某些标识符进行分页，但是看的有点迷惑

根据 getBoundingClientRect() API 计算尺寸；如果你需要在指定节点进行强制分割，就手动标记下 nodeType 就行

syymo commented 3 years ago

老哥range的setEndBefore这里是什么意思呢？这个能达到分页的效果吗？我查了很多资料都没有这方面的知识

hijiangtao commented 3 years ago

MDN 上有 API 介绍

syymo notifications@github.com 于 2020年12月3日周四 17:33写道：

老哥range的setEndBefore这里是什么意思呢？这个能达到分页的效果吗？我查了很多资料都没有这方面的知识

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hijiangtao/hijiangtao.github.io.comments/issues/83#issuecomment-737782143, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABGCIP3HZMI7MM5XLHIPV23SS5LQPANCNFSM4PHOYAXQ .

wuxue107 commented 7 months ago

https://github.com/wuxue107/bookjs-eazy 一个前端生成PDF的库，实现差分DOM, 前后端都可以生成PDF

hijiangtao / hijiangtao.github.io.comments

用 puppeteer 实现网站自动分页截取的趣事 - Joe’s Blog #83