目前市面上前端生成 pdf 的库最多只能生成 20 多页 pdf。而我的方案将这个数字提升了 100 倍

[lmq1919]

大概的实现步骤：

1. 解析 html 页面，生成一个包含节点位置信息，样式，层级，内容等信息的 DOM 树。

2. 递归 DOM 树，根据节点据顶部的高度和生成页面规格的高度，将节点分配到不同的页面。

3. 调用jspdf.js的 api,将节点绘制到 PDF 文件上。

优点：

1. 生成的是矢量的 PDF ，可以对 PDF 的文本进行搜索，选中，编辑。

2. 生成的文件体积很小

3. 使用简单，一行代码即可将 html 页面转成 pdf

4. 精准的分页，避免元素被切割。

5. 如果文件体积不大，而且电脑性能支持，可以生成几千页的 PDF

1. 具体的说明

https://juejin.cn/post/7583912637470769203

2. 在线体验

https://dompdfjs.lisky.com.cn

3. Git 仓库地址 (欢迎 Star⭐⭐⭐)

https://github.com/lmn1919/dompdf.js

[devilte]

以前有被这种分页问题困扰过，先 star 了 支持一下

[Razio]

啊？我咋之前做的都是几百上千页的。。没用 jspdf

[lmq1919]

@Razio 大佬分享一下技术方案？

[Razio]

@lmq1919 #3 回忆了一下，除非文本简单，没字体图片，否则肯定要拆分生成再合并🤡

[ajan]

@lmq1919 貌似不支持中文呢

[ajan]

@ajan 看了下文档，要配置下，才支持中文，已收藏

[narmgalaxy]

点开发现已经 star 过了

[logictan89]

啊？
[AI 帮我写的]( https://tools.logiconsole.com/#/markdown-to-pdf)

[XR843]

1. 纯前端矢量 PDF 生成
- 无需后端服务，一行代码即可在浏览器端将 HTML/DOM 转换为真正的矢量 PDF
- 生成的 PDF 可编辑、可搜索文本，非图片形式，文件体积更小

2. 支持超长文档分页
- 突破 canvas 高度限制，支持生成数千页的 PDF 文档
- 内置智能分页功能，自动处理页面断点

3. 丰富的样式支持
- 文本：字体、大小、颜色、描边等
- 边框：宽度、颜色、样式、圆角
- 背景：渐变、阴影效果
- 支持 Canvas 和 SVG 元素直接渲染

4. 灵活的自定义配置
- 支持自定义字体（ base64 编码，解决中文等非英文字体问题）
- 可配置页眉页脚
- 支持多种页面尺寸（ A4 、Letter 等）
- PDF 加密和权限控制

5. 基于成熟技术栈
- 底层依赖 html2canvas + jsPDF 两大成熟库
- TypeScript 开发，类型安全
- 支持 NPM/CDN 多种引入方式，广泛的浏览器兼容性（ IE9+）

[Q980q48Jgj6pRXoO]

加油

[XHalso]

首页 demo 下载丢失最后一个折线图

[greatghoul]

好好好，star 一下。

[lmq1919]

@logictan89 markdown 转 pdf 不一样

[lmq1919]

@XHalso 应该是偏移量没计算好，少了一页，我修复一下