这是一个创建于 538 天前的主题，其中的信息可能已经有所发展或是发生改变。
使用 React 开发 web 前端，其中的 1 个页面是用 antd 的 Table 组件构建的报表。怎样才能一键导出这个报表页面呢？
想要导出纯 html 的页面，也就是不带 js, css 文件等。因为这样使用比较方便嘛。有比较简单的方法吗？
想要导出纯 html 的页面，也就是不带 js, css 文件等。因为这样使用比较方便嘛。有比较简单的方法吗？
 |
1
walpurgis 2021-02-23 13:11:19 +08:00 via Android
html 使用方便？
只是留档查看的话，一般就用浏览器的打印功能导出 PDF，或者右键另存为单个文件(mhtml) |
 |
2
no1xsyzy 2021-02-23 13:29:36 +08:00
愿意花点功夫可以自己重新组合一遍
接受丑陋的样式可以直接拉 outerHTML，或者也可以在此基础上自己添加点样式甚至像素级拷贝 |
 |
3
Perry 2021-02-23 13:33:29 +08:00
js download blob
|
 |
4
sillydaddy OP @no1xsyzy 这样保存的话，如果里面用到了 antd 的样式，样式就丢失了吧。
|
|
5
sillydaddy OP @walpurgis 对，我想实现的就是一个打印功能。只不过想要的打印结果是一个单一的 html 文件。页面的样式能保留。
|
 |
6
baoshuo 2021-02-23 14:01:42 +08:00
把样式和 js 内联进 HTML 里面就好了吧
|
 |
7
9ki 2021-02-23 14:02:49 +08:00
html2canvas
|
 |
8
hellomimi 2021-02-23 14:03:13 +08:00
使用 html2canvas 截图保存，打印
|
|
9
no1xsyzy 2021-02-23 14:03:36 +08:00
@sillydaddy 把 antd 的样式复制过去啊，“像素级拷贝”
|
|
10
9ki 2021-02-23 14:05:31 +08:00
@9ki 猜测楼主的需求就是为了导出 html，pdf 这类的高保真的数据结构，上面提到的 html2canvas + canvas to pdf 应该可以解决（跑题了。。）
|
 |
11
devwolf 2021-02-23 14:09:08 +08:00
页面打印？是否需要的是 react-to-print 插件，问同事要来了名字，我自己还没使用过。
|
|
12
sillydaddy OP |
|
13
sillydaddy OP @devwolf 看了下，这个是直接调用打印机了吧。厉害了。
|
 |
14
siteshen 2021-02-23 18:22:54 +08:00
antd Table/ProTable 导出 csv 的 TypeScript 代码，500 块包邮。。
|
 |
16
kinghly 2021-02-23 18:45:42 +08:00 via Android
自己用数据拼个 table 出来然后下载
|
 |
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 |
|
18
sillydaddy OP @baoshuo #6
@no1xsyzy #9 @9ki #10 如果想在 js 代码中，将某个页面用到的 js 或 css 内联进对应的 html，是不是必须得用第三方库啊？ 我找到了一个叫做 inliner 的库 ( https://github.com/remy/inliner ) |
|
19
no1xsyzy 2021-02-25 09:40:40 +08:00
@sillydaddy 你也可以自己遍历文档树替换
|
Select Language