Angular导出PDF时dataAddComment空格换行丢失，如何保留原有格式？

出现该问题的原因是jsPDF-autoTable默认会按照HTML规则合并连续空白字符，且不会主动将DOM中的换行符转换为PDF内的换行，可按以下步骤修改：

步骤1：给目标DOM添加保留空白的CSS样式 #

先给你页面上对应dataAddComments的元素添加CSS配置，保证DOM原有的空格、换行能被正确读取：

/* 替换为你实际的元素选择器 */
.data-add-comments {
  white-space: pre-wrap;
}

步骤2：修改autoTable导出配置 #

调整你的addComSection方法，新增useCss参数和单元格空白格式配置，修改后代码如下：

public addComSection(doc) {
  debugger;
  let dataAddComments = this.dataAddComments.nativeElement;
  console.log(dataAddComments);
  doc.autoTable({
    html: dataAddComments, 
    theme: 'striped', 
    tableWidth: 'Wrap',
    width: 190, 
    useCss: true, // 新增：开启读取DOM的CSS样式
    styles: {
      halign: 'justified',
      whiteSpace: 'pre-wrap' // 新增：强制单元格保留换行、连续空格
    }, 
    startY: 80,
    didParseCell(data) {
      if (data.row.index === 0) {
        data.cell.styles.fontStyle = 'bold'
        data.cell.styles.textColor = [255, 255, 255];
        data.cell.styles.fillColor = [41, 128, 185];
      }
      // 如果你使用的autoTable版本低于v3.5，额外加下面这行处理换行符
      // data.cell.text = data.cell.raw.toString().split(/\r?\n/g)
    }
  });
}

关键配置说明 #

• useCss: true：开启后autoTable会主动读取DOM元素上的样式配置，避免解析HTML时丢失格式
• whiteSpace: 'pre-wrap'：autoTable的单元格样式配置，会保留所有空格、换行符，且自动根据单元格宽度折行
• 低版本autoTable不支持whiteSpace属性时，手动将文本按换行符拆分为数组，autoTable会自动将数组的每一项渲染为单独一行

内容的提问来源于stack exchange，提问作者JJ Shashank