2016-11-01 9 views
5

kodu w pytaniu:Jak projektować tytuł w eksportowanym pliku PDF w elementu datatable

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

Jak mogę styl tytuł używając być może html:

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

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

Gdy próbuję to zrobić to wyświetla znaczniki html zamiast stylizować je.

+0

To tylko tworzy tabelę w prawej DOM? Jeśli tak, to możesz po prostu nakierować swoje znaczniki tabeli, a następnie nadać im styl. –

+0

Wygląda na to, że silnik renderujący PDF z danymi nie obsługuje znaczników html w tytule. Jakiego formatu PDF używasz? – sebkrueger

+0

@sebkrueger Im właśnie przy użyciu whats dostępne po wyjęciu z pudełka z DataTables, myślę, że może to być pdfMake – ImpendingDoom

Odpowiedz

3

Nie można używać HTML w tytule. Wydaje się, że nie ma sposobu na obejście tego ograniczenia. To BTW nie jest trywialnym zadaniem, którego można oczekiwać od PDFmake. Pomyśl o tym - każdy typ elementu HTML powinien zostać odwzorowany na domyślny styl używany podczas rysowania pliku PDF na kanwie. Jednakże, jeśli problemem jest linebreaks \n będzie działać jako <br>, tj

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

jedyną realną opcji masz jest bardzo ograniczony zestaw „pseudo” odniesień -CSS można dodać do doc.styles.title dosłowny w customize oddzwonić. Przykład

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

Zobacz to na przykład ->https://jsfiddle.net/ztjLtbwm/

Powodem Ja nazywam to „pseudo” -CSS jest to, że podmioty pracujące albo jest taka sama jak ekwiwalencyjne CSS lub bardzo blisko. Zobacz pełną listę obsługiwanych stylów tutaj ->https://github.com/bpampuch/pdfmake/blob/master/src/styleContextStack.js#L84 Będziesz musiał spróbować-błąd na każdej jednostce, na przykład fillColor nie wydaje się być przestrzegane przez title; background ma - ale nie backgroundColor.