DataTables导出PDF时<br>标签无法换行，显示长空格问题

问题背景 #

使用DataTables 2.0.6实现数据展示与导出，其他格式（Excel、CSV等）导出正常，但PDF导出时，表头(<th>)和单元格(<td>)内的<br>标签未实现换行，而是显示为长空格。尝试通过字符串替换处理<br>标签仅对普通字符有效，无法解决换行问题。

解决方案 #

核心原因是DataTables导出PDF时会将HTML的<br>标签转换为空格，而pdfmake（DataTables PDF导出依赖的库）需要将多行文本以数组形式传入才能识别换行。通过预处理导出内容+自定义PDF文档结构两步解决：

步骤1：在导出选项中预处理内容，替换<br>为换行符 #

在pdfHtml5按钮的exportOptions中添加render函数，将HTML中的<br>标签替换为换行符\n：

buttons: [{
  extend: 'pdfHtml5',
  // 其他配置...
  exportOptions: {
    columns: [1, 2, 3, 4],
    search: 'applied',
    order: 'applied',
    render: function(data, type, row) {
      if (type === 'pdf') {
        // 匹配所有<br>标签（包括<br>、<br/>、<br />）
        return data.replace(/<br\s*\/?>/gi, '\n');
      }
      return data;
    }
  },
  // 其他配置...
}]

步骤2：在customize函数中将换行文本转为数组 #

在customize函数中遍历PDF表格的所有单元格，将包含\n的字符串拆分为数组（pdfmake会自动将数组元素渲染为多行）：

customize: function (doc) {
  // 原有自定义配置...
  
  // 处理表格单元格的换行
  var tableBody = doc.content[0].table.body;
  tableBody.forEach(function(row) {
    row.forEach(function(cell) {
      if (typeof cell.text === 'string' && cell.text.includes('\n')) {
        cell.text = cell.text.split('\n');
        // 保持单元格内容居中（匹配原HTML的text-center样式）
        cell.alignment = 'center';
      }
    });
  });
  
  // 原有自定义配置...
}

完整修改后的PDF按钮配置示例 #

{
  extend: 'pdfHtml5',
  className: 'btn btn-sm btn-warning',
  titleAttr: 'PDF Olarak İndir',
  text: '<i class="fa fa-file-pdf-o"></i> PDF',
  filename: 'pdf-export',
  extension: '.pdf',
  exportOptions: {
    columns: [1, 2, 3, 4],
    search: 'applied',
    order: 'applied',
    render: function(data, type, row) {
      if (type === 'pdf') {
        return data.replace(/<br\s*\/?>/gi, '\n');
      }
      return data;
    }
  },
  customize: function (doc) {
    doc.content.splice(0, 1);
    doc.pageMargins = [40, 80, 40, 40];
    doc.defaultStyle.fontSize = 10;
    doc.styles.tableHeader.fontSize = 10;
    
    doc.content[0].table.widths = ['20%', '30%', '30%', '20%'];

    doc.styles.tableHeader = {
      color: 'navy',
      alignment: 'center'
    };

    doc['header'] = (function () {
      return {
        columns: [
          {
            image: logo
          },
          {
            alignment: 'center',
            italics: true,
            text: dtableheaderorta,
            fontSize: 18,
            margin: [10, 0],
            width:400
          },
          {
            alignment: 'right',
            fontSize: 10,
            text: dtableheadersag
          }
        ],
        margin: 30
      }
    }); 

    doc['footer'] = (function (page, pages) {
      return {
        columns: [
          {
            alignment: 'left',
            text: dtablefootersol
          },
          {
            alignment: 'right',
            text: ['Sayfa ', { text: page.toString() }, ' / ', { text: pages.toString() }]
          }
        ],
        margin: [30, 0]
      }
    });

    for (var x = 2; x < doc.content[0].table.body.length; x+=2) {
      doc.content[0].table.body[x].forEach(function (h) {
        h.fillColor = dtableRowEvenBg;
        
      });
    }

    var objLayout = {};
    objLayout['width'] = function (i) { return 800; };
    objLayout['hLineWidth'] = function (i) { return .5; };
    objLayout['vLineWidth'] = function (i) { return .5; };
    objLayout['hLineColor'] = function (i) { return '#aaa'; };
    objLayout['vLineColor'] = function (i) { return '#aaa'; };
    objLayout['paddingLeft'] = function (i) { return 4; };
    objLayout['paddingRight'] = function (i) { return 4; };
    doc.content[0].layout = objLayout;

    // 新增的换行处理代码
    var tableBody = doc.content[0].table.body;
    tableBody.forEach(function(row) {
      row.forEach(function(cell) {
        if (typeof cell.text === 'string' && cell.text.includes('\n')) {
          cell.text = cell.text.split('\n');
          cell.alignment = 'center';
        }
      });
    });
  }
}

原理说明 #

1. 预处理阶段：通过exportOptions.render在导出PDF时，将HTML中的<br>标签统一替换为换行符\n，确保内容携带换行信息。
2. PDF文档自定义阶段：pdfmake库将数组形式的文本自动渲染为多行，因此我们将带\n的字符串拆分为数组，实现单元格内的换行效果。

内容的提问来源于stack exchange，提问作者Zafer Andaç Özer