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

怎样从 React web 应用中,导出报表 html 呢?

  •  
  •   sillydaddy · 2021-02-23 11:37:51 +08:00 · 2351 次点击
    这是一个创建于 1130 天前的主题,其中的信息可能已经有所发展或是发生改变。
    使用 React 开发 web 前端,其中的 1 个页面是用 antd 的 Table 组件构建的报表。怎样才能一键导出这个报表页面呢?

    想要导出纯 html 的页面,也就是不带 js, css 文件等。因为这样使用比较方便嘛。有比较简单的方法吗?
    19 条回复    2021-02-25 09:40:40 +08:00
    walpurgis
        1
    walpurgis  
       2021-02-23 13:11:19 +08:00 via Android
    html 使用方便?
    只是留档查看的话,一般就用浏览器的打印功能导出 PDF,或者右键另存为单个文件(mhtml)
    no1xsyzy
        2
    no1xsyzy  
       2021-02-23 13:29:36 +08:00
    愿意花点功夫可以自己重新组合一遍
    接受丑陋的样式可以直接拉 outerHTML,或者也可以在此基础上自己添加点样式甚至像素级拷贝
    Perry
        3
    Perry  
       2021-02-23 13:33:29 +08:00
    js download blob
    sillydaddy
        4
    sillydaddy  
    OP
       2021-02-23 13:54:57 +08:00
    @no1xsyzy 这样保存的话,如果里面用到了 antd 的样式,样式就丢失了吧。
    sillydaddy
        5
    sillydaddy  
    OP
       2021-02-23 13:56:31 +08:00
    @walpurgis 对,我想实现的就是一个打印功能。只不过想要的打印结果是一个单一的 html 文件。页面的样式能保留。
    baoshuo
        6
    baoshuo  
       2021-02-23 14:01:42 +08:00
    把样式和 js 内联进 HTML 里面就好了吧
    9ki
        7
    9ki  
       2021-02-23 14:02:49 +08:00
    html2canvas
    hellomimi
        8
    hellomimi  
       2021-02-23 14:03:13 +08:00
    使用 html2canvas 截图保存,打印
    no1xsyzy
        9
    no1xsyzy  
       2021-02-23 14:03:36 +08:00
    @sillydaddy 把 antd 的样式复制过去啊,“像素级拷贝”
    9ki
        10
    9ki  
       2021-02-23 14:05:31 +08:00
    @9ki 猜测楼主的需求就是为了导出 html,pdf 这类的高保真的数据结构,上面提到的 html2canvas + canvas to pdf 应该可以解决(跑题了。。)
    devwolf
        11
    devwolf  
       2021-02-23 14:09:08 +08:00
    页面打印?是否需要的是 react-to-print 插件,问同事要来了名字,我自己还没使用过。
    sillydaddy
        12
    sillydaddy  
    OP
       2021-02-23 14:21:21 +08:00
    @9ki 是的。 看了下,html2canvas 应该是保存成图片形式了。

    @baoshuo 感觉应该是的。。还不太熟悉怎么实现。
    sillydaddy
        13
    sillydaddy  
    OP
       2021-02-23 14:28:53 +08:00
    @devwolf 看了下,这个是直接调用打印机了吧。厉害了。
    siteshen
        14
    siteshen  
       2021-02-23 18:22:54 +08:00
    antd Table/ProTable 导出 csv 的 TypeScript 代码,500 块包邮。。
    siteshen
        15
    siteshen  
       2021-02-23 18:24:10 +08:00
    @siteshen 理解错需求了,撤销小广告。
    kinghly
        16
    kinghly  
       2021-02-23 18:45:42 +08:00 via Android
    自己用数据拼个 table 出来然后下载
    XCFOX
        17
    XCFOX  
       2021-02-23 21:20:48 +08:00   ❤️ 1
    React 倒是有一个 renderToSting() 方法 可以直接拿到 html:
    https://zh-hans.reactjs.org/docs/react-dom-server.html#reference
    sillydaddy
        18
    sillydaddy  
    OP
       2021-02-24 10:30:50 +08:00
    @baoshuo #6
    @no1xsyzy #9
    @9ki #10
    如果想在 js 代码中,将某个页面用到的 js 或 css 内联进对应的 html,是不是必须得用第三方库啊? 我找到了一个叫做 inliner 的库 ( https://github.com/remy/inliner )
    no1xsyzy
        19
    no1xsyzy  
       2021-02-25 09:40:40 +08:00
    @sillydaddy 你也可以自己遍历文档树替换
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2795 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 11:51 · PVG 19:51 · LAX 04:51 · JFK 07:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.