注:在react (antd) 中使用html2canvas
将textarea转换div即可
{
pdfFlag // react中的state,在打印的时候,先设置为true,此时显示div,打印后设置为false,显示textarea
?
<div className={styles.textBlock} dangerouslySetInnerHTML={{ __html: drawDescribe.replace(/(\n|\r|\r\n)/g, '<br />') }} /> // 核心代码 drawDescribe.replace(/(\n|\r|\r\n)/g, '<br />')
:
<TextArea rows={7} value={drawDescribe} onChange={(e) => this.setState({ drawDescribe: e.target.value })} maxLength={300} />
}
样式设置为和textarea一样
.textBlock {
max-width: 100%;
height: auto;
min-height: 157px;
line-height: 1.5;
vertical-align: bottom;
transition: all 0.3s, height 0s;
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
list-style: none;
font-feature-settings: 'tnum';
position: relative;
display: inline-block;
width: 100%;
padding: 4px 11px;
color: rgba(0, 0, 0, 0.65);
font-size: 14px;
line-height: 1.5;
background-color: #fff;
background-image: none;
border: 1px solid #d9d9d9;
border-radius: 4px;
transition: all 0.3s;
}
网友评论