怎样从 React web 应用中，导出报表 html 呢？

[sillydaddy]

使用 React 开发 web 前端，其中的 1 个页面是用 antd 的 Table 组件构建的报表。怎样才能一键导出这个报表页面呢？

想要导出纯 html 的页面，也就是不带 js, css 文件等。因为这样使用比较方便嘛。有比较简单的方法吗？

[walpurgis]

html 使用方便？
只是留档查看的话，一般就用浏览器的打印功能导出 PDF，或者右键另存为单个文件(mhtml)

[no1xsyzy]

愿意花点功夫可以自己重新组合一遍
接受丑陋的样式可以直接拉 outerHTML，或者也可以在此基础上自己添加点样式甚至像素级拷贝

[Perry]

js download blob

[sillydaddy]

@no1xsyzy 这样保存的话，如果里面用到了 antd 的样式，样式就丢失了吧。

[sillydaddy]

@walpurgis 对，我想实现的就是一个打印功能。只不过想要的打印结果是一个单一的 html 文件。页面的样式能保留。

[baoshuo]

把样式和 js 内联进 HTML 里面就好了吧

[9ki]

html2canvas

[hellomimi]

使用 html2canvas 截图保存，打印

[no1xsyzy]

@sillydaddy 把 antd 的样式复制过去啊，“像素级拷贝”

[9ki]

@9ki 猜测楼主的需求就是为了导出 html，pdf 这类的高保真的数据结构，上面提到的 html2canvas + canvas to pdf 应该可以解决（跑题了。。）

[devwolf]

页面打印？是否需要的是 react-to-print 插件，问同事要来了名字，我自己还没使用过。

[sillydaddy]

@9ki 是的。 看了下，html2canvas 应该是保存成图片形式了。

@baoshuo 感觉应该是的。。还不太熟悉怎么实现。

[sillydaddy]

@devwolf 看了下，这个是直接调用打印机了吧。厉害了。

[siteshen]

antd Table/ProTable 导出 csv 的 TypeScript 代码，500 块包邮。。

[siteshen]

@siteshen 理解错需求了，撤销小广告。

[kinghly]

自己用数据拼个 table 出来然后下载

[XCFOX]

React 倒是有一个 renderToSting() 方法 可以直接拿到 html:
https://zh-hans.reactjs.org/docs/react-dom-server.html#reference

[sillydaddy]

@baoshuo #6
@no1xsyzy #9
@9ki #10
如果想在 js 代码中，将某个页面用到的 js 或 css 内联进对应的 html，是不是必须得用第三方库啊？ 我找到了一个叫做 inliner 的库 ( https://github.com/remy/inliner )

[no1xsyzy]

@sillydaddy 你也可以自己遍历文档树替换