V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Forviler
V2EX  ›  前端开发

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

  •  
  •   Forviler · 285 天前 · 1006 次点击
    这是一个创建于 285 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    第一个:window.print()

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

    第二个:jsPDF + html2canvas

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

    第三个:pdfmake + html-to-pdfmake

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

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

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

    7 条回复    2024-03-18 17:13:28 +08:00
    chenliangngng
        1
    chenliangngng  
       285 天前
    以前做过,node 做中台处理成 pdf ,处理完直接给浏览器丢文件
    omi4399
        2
    omi4399  
       285 天前
    你说的这几个问题,https://github.com/diegomura/react-pdf#readme 应该都可以解决
    Forviler
        3
    Forviler  
    OP
       285 天前
    @chenliangngng 想着在前端直接实现,而且目前没有中台,倒是可以考虑在后台 用 Puppeteer 来实现
    Forviler
        4
    Forviler  
    OP
       285 天前
    @omi4399 感谢, 这个看起来确实能解决我的问题, 不过有没有 Vue 的 版本,这个 React 的可以留待后用
    MRG0
        5
    MRG0  
       285 天前
    @Forviler #4 FranckFreiburger/vue-pdf 还真有
    Forviler
        6
    Forviler  
    OP
       285 天前
    @MRG0 #5 这个是用来预览 pdf 文件的, 我用过,他这个 print 应该是也是调用 window.print()
    MRG0
        7
    MRG0  
       285 天前
    @Forviler #6 不行就让后台生成吧
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   924 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 21:27 · PVG 05:27 · LAX 13:27 · JFK 16:27
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.