Home Sign Up Sign In
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
lmq1919
V2EX  ›  程序员

开源了一个 html 转 pdf 的 js 库，这应该是 html 转 pdf 最正确的思路了

  •  3      
  •   lmq1919 · Jan 20 · 7724 views
    This topic created in 287 days ago, the information mentioned may be changed or developed.

    大概的实现步骤：

    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

    1. 在线体验

    https://dompdfjs.lisky.com.cn

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

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

  • HTML转PDF
  • JS库
  • 矢量PDF
    51 replies  •  2026-07-29 10:16:55 +08:00
    yangxiaopeipei
    yangxiaopeipei
    Jan 20
    1
    打印不是更快吗
    cpstar
    cpstar
    Jan 20
    2
    @yangxiaopeipei #1 服务器上后台服务咋打印
    kuxuan
    kuxuan
    Jan 20
    3
    收藏了。
    evan1
    evan1
    Jan 20
    4
    @cpstar #2 无头浏览器
    herbloo
    herbloo
    Jan 20
    5
    @evan1 正解吧，不内嵌一个 chrome 进去，很难做到全兼容
    spark
    spark
    Jan 20
    6
    @cpstar puppeteer, playwright
    jifengg
    jifengg
    Jan 20
    7
    之前关注过，先说一下网站证书过期了。
    另外，demo 导出的 pdf ，没有最后的 line chart 。不知道是不是个例。UA:'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36'
    evan1
    evan1
    Jan 20
    8
    @herbloo #5 是的，我做过这个。当时做了很久，各种方案都尝试了，最后发现还是得无头浏览器。其它 js 方式生成的多多少少都会有转换的问题。比如 table 的高度、边框宽度、二维码清晰度之类的。

    无头浏览器缺点就是占内存，不过用线程池+队列轮换处理也还好。
    cirzear
    cirzear
    Jan 20
    9
    @jifengg +1
    lmq1919
    lmq1919
    OP
    Jan 20
    10
    @jifengg 感谢关注😄，证书已经更新
    lmq1919
    lmq1919
    OP
    Jan 20
    11
    @yangxiaopeipei 打印有的需求满足不了😭
    dbit
    dbit
    Jan 20
    12
    兼容好像有问题, ubuntu 下载下来, 用 Xreader 打开全部是空白页
    avenger
    avenger
    Jan 20
    13
    这个支持 serverless 环境吗？
    在线体验打不开了，正好有这个需求
    目前用的是 @sparticuz/chromium-min
    webszy
    webszy
    Jan 20❤️1
    14
    点了 star,支持
    lmq1919
    lmq1919
    OP
    Jan 20
    15
    @webszy 感恩
    lmq1919
    lmq1919
    OP
    Jan 20
    16
    @avenger serverless 还是用其他方案吧，我这个库推荐在前端浏览器使用
    xz410236056
    xz410236056
    Jan 20
    17
    我之前简历是 HTML 的，但是 BOSS 只让传 PDF ，找了很多都找不到合适的。因为 HTML 并不是纯静态页面，需要加载部分 JS 渲染，这种时候转的 PDF 就有点问题
    zhangyunlu80
    zhangyunlu80
    Jan 20
    18
    支持 简单 echart 图表，饼图，柱状图么，支持 一些小的 icon 嘛
    lmq1919
    lmq1919
    OP
    Jan 20
    19
    @zhangyunlu80 必须支持的
    lmq1919
    lmq1919
    OP
    Jan 20
    20
    @xz410236056 我的库支持你这个需求
    54xavier
    54xavier
    Jan 20❤️1
    21
    不错不错，好活，当赏
    ion1ze
    ion1ze
    Jan 20
    22
    Edge 官网的直接下载都是空白页
    ysc3839
    ysc3839
    Jan 20 via Android
    23
    是正确的思路，但是是错误的做法。
    解析 html 及生成 PDF 已经有现成的工具了，那就是浏览器。
    正确的做法应该是直接使用浏览器转换，因为自己实现的 html 解析很难媲美浏览器。
    visper
    visper
    Jan 20
    24
    感觉样式肯定有些情况不对。如果需要完美方案，还是得无头浏览器。
    lmq1919
    lmq1919
    OP
    Jan 20
    25
    @ysc3839 浏览器转 pdf 不能实现所有需求，不然就不会有那么多相关的库。你用浏览器打印一下这个页面看看效果就知道了
    lmq1919
    lmq1919
    OP
    Jan 20
    26
    @visper 是会有误差，不会所有的 css 属性都支持。不过我这个方案不需要服务器支持，看需求再取舍😂
    lmq1919
    lmq1919
    OP
    Jan 20
    27
    @54xavier 感恩❤️
    archean
    archean
    Jan 20
    28
    相比 CloudFlare 的 Browser Rendering 有何优势？
    lmq1919
    lmq1919
    OP
    Jan 20
    29
    @archean 我的方案是纯前端实现 html 转 pdf 的哈，不需要服务器，可以很方便的集成到你的网址。个人项目何德何能和巨头的项目比😂
    archean
    archean
    Jan 20
    30
    @lmq1919 #29 了解了，我会去看一下
    lynan
    lynan
    Jan 20
    31
    star 支持一下，说不定哪天就用得到了
    otakustay
    otakustay
    Jan 20
    32
    我有个疑问，这样生成的 PDF ，再用做下游的消费，比如 PDF 转到 Markdown ，还能保留最原始 HTML 里的信息层级结构吗
    ulyssess
    ulyssess
    Jan 20
    33
    mark 一下，明天试一试你这个。现在用的就是 html2pdf 这个库，有几个问题：1. 页数多了会出现空白，因为 canvas 太大了 2. 分页的时候会切割元素。
    Irisviel
    Irisviel
    Jan 20
    34
    感谢分享，之前搞 Mermaid 导出截图一直渲染不了，试试你这个方案~
    lizhenda
    lizhenda
    Jan 20
    35
    官网打开有点慢哦，Edge 打开该 pdf 文件确实会是空白，使用别的本地 pdf 查看工具看就是正常的。
    lmq1919
    lmq1919
    OP
    Jan 21
    36
    @ulyssess 我的方案在努力解决这些问题，不是基于 canvas 的，页数多也不会出现空白
    spritecn
    spritecn
    Jan 21
    37
    用过 java Itext 版本的，坑很多
    xuying
    xuying
    Jan 21
    38
    看着不错 要是有油猴插件就更好了
    xmdbb
    xmdbb
    Jan 22
    39
    不知道啥问题，我直接在线体验导出是六页空白的 PDF
    lmq1919
    lmq1919
    OP
    Jan 22
    40
    @xmdbb 有开发的计划
    lmq1919
    lmq1919
    OP
    Jan 22
    41
    @xmdbb edge 浏览器打开有点问题，可以试一下其他方式打开
    xmdbb
    xmdbb
    Jan 22
    42
    @lmq1919 这个就有点头痛；
    目前有些项目就是用 js-pdf 来导出，但是遇到表格分页的时候，就会导致文字直接砍断，或者表格直接截断。
    而且也没办法要求客户使用这个或那个浏览器
    lmq1919
    lmq1919
    OP
    Jan 22
    43
    @xmdbb 我现在在处理这个问题
    lmq1919
    lmq1919
    OP
    Jan 22
    44
    @xmdbb 也不是所有情况都会这样，你可以先试一下
    xmdbb
    xmdbb
    Jan 22
    45
    @lmq1919 哈哈，理解，接触过 js-pdf 后就知道有多不易，加油，期待哪天能薅你羊毛把 js-pdf 换成你的项目
    oasis2008f
    oasis2008f
    Jan 23
    46
    动态分页的问题真是太头痛了，尝试下你的方案
    lmq1919
    lmq1919
    OP
    Feb 4
    47
    @xmdbb edge 浏览器现在也没问题了
    applet
    applet
    Jul 15
    48
    @evan1 #4 我也是无头浏览器方案，带图片、数学公式、页眉页脚，100 页基本 10 秒以内，已经能用了，楼主这个方案应该也能支持增加公式和图片，但是页眉页脚不知道好不好搞
    lmq1919
    lmq1919
    OP
    Jul 16
    49
    @alphagao 页眉页脚可以支持自定义。其他需求可以去给我提个 issue,我慢慢去完善
    wanniwa
    wanniwa
    Jul 29
    50

    好像会丢样式
    lmq1919
    lmq1919
    OP
    Jul 29
    51
    @wanniwa 这个是 css 伪类的问题，没有处理好。预计下个版本解决
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   4248 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 77ms · UTC 01:07 · PVG 09:07 · LAX 17:07 · JFK 20:07
    ♥ Do have faith in what you're doing.