[英]Grommet TextArea exports multiline text as a single line in the image
我想将 Grommet TextArea
导出为图像。 如果只有一行文本,则以下代码有效。 但是,如果我调整TextArea
组件以使文本填充多行,则不会在 output 图像中导出。
这就是它的外观(1 - 是包含我要导出的多行TextArea
的页面,2 - 导出的TextArea
,仅包含一行文本)
好像我只是缺少关于 HTML canvas 的东西。 或者也许 Grommet TextArea
中有一些属性有助于改变这种行为?
应用程序.js:
import React, { Component } from "react";
import { TextArea } from "grommet";
import "./styles.css";
import { exportComponentAsPNG } from "react-component-export-image";
export default class App extends Component {
constructor(props) {
super(props);
this.textRef = React.createRef();
this.state = { text: "" };
}
render() {
const { text } = this.state;
return (
<div className="App">
<TextArea
ref={this.textRef}
value={text}
onChange={(event) => this.setState({ text: event.target.value })}
/>
<button onClick={() => exportComponentAsPNG(this.textRef)}>
Click
</button>
</div>
);
}
}
index.js:
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
索引.html:
<div id="root"></div>
我认为问题在于图像的导出方式。 我只使用 HTML 的“textarea”而不是 Grommet TextArea 组件创建了一个快速测试,但问题仍然存在:
我已经通过在他们的演示应用程序上运行 HTML 示例验证了您所描述的行为是react-component-export-image
package 的预期行为,这似乎是他们的核心功能行为。 您可能需要提交要求支持多行屏幕截图的增强请求。 这是在他们的演示应用程序上运行 HTML 示例的屏幕截图示例:
该问题来自html2canvas
库,它是react-component-export-image
的核心。 在html2canvas
社区中有几个关于这个问题的线程,包括这个(我猜是主要的): https://github.com/niklasvh/html2canvas/issues/2008
最好的解决方案(在我的情况下也有帮助)是使用contenteditable
div 而不是textarea
元素
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.