html2canvas将textarea转换后不换行问题

2021-12-03  本文已影响0人  时间煮鱼

注:在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;
    }
上一篇下一篇

猜你喜欢

热点阅读