美文网首页
html2canvas将textarea转换后不换行问题

html2canvas将textarea转换后不换行问题

作者: 时间煮鱼 | 来源:发表于2021-12-03 17:37 被阅读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;
        }
    

    相关文章

      网友评论

          本文标题:html2canvas将textarea转换后不换行问题

          本文链接:https://www.haomeiwen.com/subject/wnhmxrtx.html