V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
Forviler

前端关于页面导出 PDF 的问题

  •  
  •   Forviler · Mar 18, 2024 · 1699 views
    This topic created in 776 days ago, the information mentioned may be changed or developed.

    网上找到了三个方案 各有优缺点吧;

    第一个:window.print()

    优点:导出速度较快、文件内容可复制; 缺点:需要手动确认、没有找到能在点击确认后能执行的回调。afterprint 确认和取消都会执行;

    第二个:jsPDF + html2canvas

    优点:不需要再点击确认框,可以一次性导出多个 pdf ; 缺点:导出需要等待页面转为图片,导致页面内容过多等待时间较长并且由于是图片无法复制;

    第三个:pdfmake + html-to-pdfmake

    优点:没有手动确认框、并且文件内容可复制、速度方面应该是比不上第一个,可能比第二个要快; 缺点:由于 pdfmake 好像不能直接传入 DOM 需要使用 html-to-pdfmake 来将标签转为 pdfmake需要的数据,但是它需要的是 字符串形式的 html 代码 ( <div>Hello Word</div> ),也是不能直接传入DOM;

    各位老哥有做过类似的业务么,有没有别的更好的办法么

    PS:我 所了解 相关知识比较片面,如果有出入请各位老哥不吝赐教

    7 replies    2024-03-18 17:13:28 +08:00
    chenliangngng
        1
    chenliangngng  
       Mar 18, 2024
    以前做过,node 做中台处理成 pdf ,处理完直接给浏览器丢文件
    omi4399
        2
    omi4399  
       Mar 18, 2024
    你说的这几个问题,https://github.com/diegomura/react-pdf#readme 应该都可以解决
    Forviler
        3
    Forviler  
    OP
       Mar 18, 2024
    @chenliangngng 想着在前端直接实现,而且目前没有中台,倒是可以考虑在后台 用 Puppeteer 来实现
    Forviler
        4
    Forviler  
    OP
       Mar 18, 2024
    @omi4399 感谢, 这个看起来确实能解决我的问题, 不过有没有 Vue 的 版本,这个 React 的可以留待后用
    Bologna
        5
    Bologna  
       Mar 18, 2024
    @Forviler #4 FranckFreiburger/vue-pdf 还真有
    Forviler
        6
    Forviler  
    OP
       Mar 18, 2024
    @MRG0 #5 这个是用来预览 pdf 文件的, 我用过,他这个 print 应该是也是调用 window.print()
    Bologna
        7
    Bologna  
       Mar 18, 2024
    @Forviler #6 不行就让后台生成吧
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   788 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 49ms · UTC 20:26 · PVG 04:26 · LAX 13:26 · JFK 16:26
    ♥ Do have faith in what you're doing.