合同打印中textarea中的文本换行显示问题

问题由来和背景

最近在做电子合同模板这块，碰到一个需求：合同正文内容后面有几个附件补充协议，这些协议内容是需要用户填写的，并且还是线上填写（不是打印成纸质版手写）。补充协议内容，一般来说都会是多段多行文本。所以，都会用textarea标签来处理。然后发现，打印预览时，textarea的多行文本换行出现问题了。行末自动换行没问题，回车换行的内容还是挤在一行了。
比如，我原本输入的是这样的：

第1111111行文本内容
第222222行文本内容
第333333行文本内容

然后替换成span标签后，打印的效果变成下面这样了：

第1111111行文本内容第222222行文本内容第333333行文本内容

解决方式

1. js的方式。
关键就是回车换行的处理。将textarea的内容获取到后，利用正则添加换行标签。核心代码如下：

function fixText(text) {
    var replaceRegex = /(\n\r|\r\n|\r|\n)/g;
    text = text || '';
    return text.replace(replaceRegex, "<br/>");
}

2. css的方式。
想保留输入时的相关格式，用代码标签pre，该标签就能保留原本的输入文本的格式。当然还是得处理一下行末自动换行的问题，不然一行就贯穿了。

pre{
  white-space: pre-wrap;
  word-wrap: break-word; 
  word-break: break-all;
}

引申

线上录入，基本都是用表单元素录入的方式，但是我们都知道，表单的值都是存在浏览器内存中的。你调用window.print()是看不到你输入在表单的值的。所以一般都会用其他标题来替换掉，我用的span。合同内容很多填写的地方都是带下划线的，打印后也需要保留，这个简单，<span style='border-bottom:#000 1px solid;line-height: 32px;'>以下为空</span>一行代码替换掉表单元素就可。
下面说说上面2种方式涉及的细节问题：
先看需要的合同模板效果图（途中内容是网上随便找的，别在意）：

合同补充说明.jpg

用上面的第1种js方式，效果基本满足。
缺点：少了每段开头的2个字的空格符，每段文字最后一行下划线未到最右端。

合同补充说明实现方式1.png

用第2种css的方式，下划线只出现在最后一行。这时，需要用linear-gradient来画间隔线。效果满足。
缺点：打印时，背景间隔线出现粗细不均匀情况，标签也需要定高。
关键代码：

.bg-line{
    width: 100%;
    height: 640px;
    border: none;
    font-size: inherit;
    line-height: 32px;
    background-color: #fff;
    background-image: -webkit-linear-gradient(transparent 31px, #000 32px);
    background-image: linear-gradient(transparent 31px, #000 32px);
    background-size: 100% 32px;
}

效果图：

合同补充说明实现方式2.png

最后，附上完整代码，自行斟酌使用哪种方式。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>合同排版问题</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <!-- // <script src="https://cdn.bootcss.com/jquery/1.7/jquery.min.js"></script> -->
    <!-- // <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script> -->
    
<style type="text/css">
*{
  margin: 0;
  padding: 0;
}
.clear:after{
  content: '';
  display: block;
  width: 0;
  height: 0;
  clear: both;
}
body{
  line-height: 24px;
  font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
}
h1,h2,h3{
  font-weight: 400;
}
/*设置打印机*/
@media print {
  @page {
      size: 195mm 275mm;  /* or size: 794px 1123px;  A4z纸张 */
  }
  .noprint {
      display: none
  }
}
.txt-c{
  text-align: center;
}
.main-con{
    font-size: 18px;
    font-family: "宋体";
    width: 660px;
    margin: 40px auto 0;
    padding: 20px 0;
}

pre{
  font-size: inherit;
  white-space: pre-wrap;
  word-wrap: break-word; 
  word-break: break-all;
}
.bg-line{
    width: 100%;
    height: 640px;
    border: none;
    font-size: inherit;
    line-height: 32px;
    background-color: #fff;
    background-image: -webkit-linear-gradient(transparent 31px, #000 32px);
    background-image: linear-gradient(transparent 31px, #000 32px);
    background-size: 100% 32px;
}
  </style>
</head>
<body>
<!-- 打印相关 -->
  <div class="txt-c noprint">
    <input type="button" onclick="printpage()" value="打印">
  </div>
<!-- 合同内容 -->
<div class="main-con">
  <h3>附件十一 补充协议</h3>
  <br>
    <!-- contenteditable="true" -->
  <textarea class="bg-line">
    甲、乙双方经友好协商，对双方签署的xxx合同，作如下补充约定，以资共同遵守。
    1、乙方确认，在入职前甲方已将其在甲方的工作内容、工作条件、工作地点、职业危害、安全生产状况及劳动报酬等情况明确告知乙方，乙方已清楚知悉上述情况且无任何异议。
    2、乙方清楚知悉岗位工作职责及任职资格。如乙方在试用期内，经考核未能符合相关任职资格以及不能完成甲方指定的及或日常分配的工作的，将被视为不符合录用条件，甲方在向乙方说明理由后有权立即单方解除本合同，并无须支付任何，经济补偿。乙方确认，甲方在入职时已将乙方所在岗位的岗位说明书提供与乙方，乙方清楚知悉岗位工作职责及任职资格。如乙方在试用期内，经考核未能符合相关任职资格以及不能完成甲方指定的及或日常分配的工作的，将被视为不符合录用条件，甲方在向乙方说明理由后有权立即单方解除本合同，并无须支付任何，经济补偿。
  </textarea>
</div>

<script>

function fixText(text) {
    var replaceRegex = /(\n\r|\r\n|\r|\n)/g;
    text = text || '';
    return text.replace(replaceRegex, "<br/>");
}

//打印前处理
function prePrint(){
  //textarea替换样式
    $('textarea').each(function (i) {
        var val = $(this).val();
        if (val == "") {
            val = "以下空白";
        }
        //第一种方式：js方式
        // var valAli = fixText(val);
        // $(this).replaceWith("<span style='border-bottom:#000 1px solid;line-height: 32px;'>" + valAli + "</span>");
        //第二种方式：css方式
        $(this).replaceWith('<pre class="bg-line">' + val + '</pre>');
    });
}

//打印事件
function printpage() {
    prePrint();
    window.print();
}

</script>
</body>
</html>

合同打印中textarea中的文本换行显示问题

问题由来和背景

解决方式

引申

参考