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

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

  •  
  •   sillydaddy · 5 天前 · 1123 次点击
    使用 React 开发 web 前端,其中的 1 个页面是用 antd 的 Table 组件构建的报表。怎样才能一键导出这个报表页面呢?

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

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