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

时间:2016-11-01 15:32:31

标签: jquery pdf datatables

有问题的代码:

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

如何使用may html设置标题样式:

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

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

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

1 个答案:

答案 0 :(得分:8)

您无法在标题中使用HTML。似乎没有办法解决这个限制。 BTW不是您期望从PDFmake完成的一项微不足道的任务。想一想 - 任何类型的HTML元素都应该映射到在画布上绘制PDF时使用的默认样式。但是,如果您关注的是换行符\n将作为<br>使用,即

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

您拥有的唯一真正的选项是一组非常有限的&#34;伪&#34; -CSS引用,您可以将其添加到doc.styles.title回调中的customize字面值。实施例

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

在示例中看到这一点 - &gt;的 https://jsfiddle.net/ztjLtbwm/

我称之为&#34;伪&#34; -CSS的原因是工作实体要么与CSS等价相同,要么非常接近。请在此处查看支持的样式的完整列表 - &gt; https://github.com/bpampuch/pdfmake/blob/master/src/styleContextStack.js#L84您必须对每个实体进行尝试错误,例如fillColor title似乎没有得到background的尊重。 backgroundColor可以 - 但不是 $d_start = new \DateTime('2016-11-02 14:15:02'); $d_now = new \DateTime('2016-11-02 14:17:02'); $interval = $d_start->diff($d_now);