如何在数据表中的导出pdf中设置标题样式答案

【问题标题】：How to style title in exported pdf in datatable如何在数据表中的导出pdf中设置标题样式
【发布时间】：2017-03-14 18:49:10
【问题描述】：

有问题的代码：

$("#my-table").DataTable( {
            data: dataSet,
            columns: columns,
            dom: 'Bfrtip',
            buttons: [
                {
                    extend: 'excelHtml5',
                    title: 'Awesome Export',
                },
                {
                    extend: 'pdfHtml5',
                    title: 'Awesome Export',
                    orientation: 'landscape',
                    pageSize: 'LEGAL'
                }
            ]
        });

如何使用 html 来设置标题的样式：

var title = '<h1>My title</h1><br /> <p>by John</p>';

// then in the code
...
buttons: [
    {
        extend: 'excelHtml5',
        title: title
    }
]
...

如果我尝试这样做，它会显示 html 标签而不是样式。

【问题讨论】：

这只是在 DOM 中创建一个表吧？如果是这样，那么您可以只定位您的表格标签，然后设置它们的样式。
看起来数据表 pdf 渲染引擎不支持标题上的 html 标签。你使用什么 pdf 渲染器？
@sebkrueger 我只是使用开箱即用的数据表，我认为它可能是 pdfMake

标签： jquery pdf datatables

【解决方案1】：

您不能在标题中使用 HTML。似乎没有任何方法可以绕过这个限制。顺便说一句，您对 PDFmake 的期望并不是一项微不足道的任务。想一想——任何类型的 HTML 元素都应该映射到在画布上绘制 PDF 时使用的默认样式。但是，如果您担心换行符\n 将作为<br> 工作，即

var title = 'My title' + '\n' + 'by John';

您拥有的唯一真正选择是一组非常有限的“伪”-CSS 引用，您可以在 customize 回调中添加到 doc.styles.title 文字。示例

buttons: [{
  extend: 'pdfHtml5',
  title: 'My title' + '\n' + 'a new line',
  customize: function(doc) {
    doc.styles.title = {
      color: 'red',
      fontSize: '40',
      background: 'blue',
      alignment: 'center'
    }   
  }  
}]

看这个例子 -> https://jsfiddle.net/ztjLtbwm/

我称之为“伪”-CSS 的原因是工作实体要么与 CSS 等价物相同，要么非常接近。在此处查看支持样式的完整列表 -> https://github.com/bpampuch/pdfmake/blob/master/src/styleContextStack.js#L84 您将不得不在每个实体上尝试错误，例如 fillColor 似乎不受 title 的尊重； background 可以 - 但不是 backgroundColor。

【讨论】：