如何在NetSuite PDF Suitelet中格式化显示文本区域/长文本字段值

我们有一个生成PDF的NetSuite Suitelet，界面上的长文本字段OBJECTIVE和文本区域字段DESCRIPTION，用户输入带空格、换行的内容时UI显示正常，但生成的PDF里格式丢失。曾试过用富文本字段，格式能保留但内容过长会被截断。相关代码片段如下：

strTable += '<table width="100%" table-layout="fixed" margin-top="30px">'
strTable += '<tr>'
    strTable += '<td><b>Objective:</b></td>'
strTable += '</tr>'
strTable += '<tr height="110px">'
    strTable += '<td style="background-color:#89AD81; color:white;"><p align="left">' + objective + '</p></td>'
strTable += '</tr>'
strTable += '<tr margin-top="30px">'
    strTable += '<td><b>Description:</b></td>'
strTable += '</tr>'
strTable += '<tr height="210px">'
    strTable += '<td style="background-color:#89AD81; color:white;"><p align="left">' + description + '</p></td>'
strTable += '</tr>'
strTable += '</table>'

核心问题原因 #

NetSuite长文本/文本区域字段的换行符是\n，连续空格会被HTML渲染合并为单个空格，而PDF默认不会解析\n为换行，导致格式丢失。富文本字段则因代码中设置了固定行高，内容超出后被截断。

解决方案 #

方案1：使用CSS样式保留格式（推荐） #

给承载文本的<p>标签添加white-space: pre-wrap;样式，该样式会保留换行、空格，同时支持自动换行，避免内容溢出：

strTable += '<table width="100%" table-layout="fixed" margin-top="30px">'
strTable += '<tr>'
    strTable += '<td><b>Objective:</b></td>'
strTable += '</tr>'
strTable += '<tr height="110px">'
    // 添加white-space样式并清除默认边距
    strTable += '<td style="background-color:#89AD81; color:white;"><p align="left" style="white-space: pre-wrap; margin: 0;">' + objective + '</p></td>'
strTable += '</tr>'
strTable += '<tr margin-top="30px">'
    strTable += '<td><b>Description:</b></td>'
strTable += '</tr>'
strTable += '<tr height="210px">'
    // 添加white-space样式并清除默认边距
    strTable += '<td style="background-color:#89AD81; color:white;"><p align="left" style="white-space: pre-wrap; margin: 0;">' + description + '</p></td>'
strTable += '</tr>'
strTable += '</table>'

方案2：手动替换字符（兼容旧版渲染） #

若CSS样式不生效，可手动将字段值里的换行符替换为<br>，空格替换为 ：

// 格式化字段值
const formattedObjective = objective.replace(/\n/g, '<br>').replace(/ /g, '&nbsp;');
const formattedDescription = description.replace(/\n/g, '<br>').replace(/ /g, '&nbsp;');

// 拼接HTML时使用格式化后的值
strTable += '<table width="100%" table-layout="fixed" margin-top="30px">'
strTable += '<tr>'
    strTable += '<td><b>Objective:</b></td>'
strTable += '</tr>'
strTable += '<tr height="110px">'
    strTable += '<td style="background-color:#89AD81; color:white;"><p align="left">' + formattedObjective + '</p></td>'
strTable += '</tr>'
strTable += '<tr margin-top="30px">'
    strTable += '<td><b>Description:</b></td>'
strTable += '</tr>'
strTable += '<tr height="210px">'
    strTable += '<td style="background-color:#89AD81; color:white;"><p align="left">' + formattedDescription + '</p></td>'
strTable += '</tr>'
strTable += '</table>'

富文本截断问题修复（可选） #

若仍需使用富文本字段，将固定行高height改为最小行高min-height，让行高随内容自动调整：

// 替换固定height为min-height
strTable += '<tr style="min-height:110px;">'
// ...
strTable += '<tr style="min-height:210px;">'

内容的提问来源于stack exchange，提问作者4N335