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



有问题的代码:

$("#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标记,而不是对其进行样式设置。

您不能在标题中使用HTML。似乎没有任何办法绕过这个限制。这是BTW,而不是一个琐碎的任务,你期望从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/

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

最新更新