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

2021-02-23 11:37:51 +08:00
 sillydaddy
使用 React 开发 web 前端,其中的 1 个页面是用 antd 的 Table 组件构建的报表。怎样才能一键导出这个报表页面呢?

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

@baoshuo 感觉应该是的。。还不太熟悉怎么实现。
sillydaddy
2021-02-23 14:28:53 +08:00
@devwolf 看了下,这个是直接调用打印机了吧。厉害了。
siteshen
2021-02-23 18:22:54 +08:00
antd Table/ProTable 导出 csv 的 TypeScript 代码,500 块包邮。。
siteshen
2021-02-23 18:24:10 +08:00
@siteshen 理解错需求了,撤销小广告。
kinghly
2021-02-23 18:45:42 +08:00
自己用数据拼个 table 出来然后下载
XCFOX
2021-02-23 21:20:48 +08:00
React 倒是有一个 renderToSting() 方法 可以直接拿到 html:
https://zh-hans.reactjs.org/docs/react-dom-server.html#reference
sillydaddy
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
2021-02-25 09:40:40 +08:00
@sillydaddy 你也可以自己遍历文档树替换

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/755388

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX