jQuery - Export HTML-Tabelle mit Baumstruktur zu PDF/Excel

Question

HTML Tabellenstruktur

<table width="100%" border="0" name="tableID" id="activity" class="table table-striped"> 
<thead> 
    <tr> 
     <th style="height:24px !important" class="ui-state-default ui-th-column ui-th-ltr">Name</th> 
     <th class="ui-state-default ui-th-column ui-th-ltr">Category</th> 
     <th class="ui-state-default ui-th-column ui-th-ltr">Created</th> 
     <th class="ui-state-default ui-th-column ui-th-ltr">Status</th> 
     <th class="ui-state-default ui-th-column ui-th-ltr">Hours</th> 
     <th class="ui-state-default ui-th-column ui-th-ltr">Action</th> 
    </tr> 
</thead> 
<tbody><tr style="border:1px solid #ccc"><td style="border:1px solid #ccc"><span style="font-weight:bold;font-size:13px;padding-left:20px;color:#ff7a85">Development</span></td><td style="border:1px solid #ccc">Development</td><td style="border:1px solid #ccc">John Doe</td><td style="border:1px solid #ccc">Active</td><td style="border:1px solid #ccc">0</td><td style="border:1px solid #ccc"><a href="http://10.103.3.96/timesheet_bijal/manage/edittask/index?project_id=478&amp;id=130">Edit</a>/<a onclick="delete_task(130,0,478)" style="cursor:pointer">Deactivate</a> </td></tr><tr style="border:1px solid #ccc"><td style="border:1px solid #ccc"><span style="font-weight:bold;font-size:13px;padding-left:40px;color:#0074a2">Bug fixing</span></td><td style="border:1px solid #ccc">Development</td><td style="border:1px solid #ccc">John Doe</td><td style="border:1px solid #ccc">Active</td><td style="border:1px solid #ccc">120</td><td style="border:1px solid #ccc"><a href="http://10.103.3.96/timesheet_bijal/manage/edittask/index?project_id=478&amp;id=131">Edit</a>/<a onclick="delete_task(131,130,478)" style="cursor:pointer">Deactivate</a> </td></tr><tr style="border:1px solid #ccc"><td style="border:1px solid #ccc"><span style="font-weight:bold;font-size:13px;padding-left:60px;color:#33B940">dev2</span></td><td style="border:1px solid #ccc">Development</td><td style="border:1px solid #ccc">John Doe</td><td style="border:1px solid #ccc">Active</td><td style="border:1px solid #ccc">100</td><td style="border:1px solid #ccc"><a href="http://10.103.3.96/timesheet_bijal/manage/edittask/index?project_id=478&amp;id=9309">Edit</a>/<a onclick="delete_task(9309,131,478)" style="cursor:pointer">Deactivate</a> </td></tr><tr style="border:1px solid #ccc"><td style="border:1px solid #ccc"><span style="font-weight:bold;font-size:13px;padding-left:80px;color:#ffa62f">dev3</span></td><td style="border:1px solid #ccc">Development</td><td style="border:1px solid #ccc">John Doe</td><td style="border:1px solid #ccc">Inactive</td><td style="border:1px solid #ccc">100</td><td style="border:1px solid #ccc"><a href="http://10.103.3.96/timesheet_bijal/manage/edittask/index?project_id=478&amp;id=9310">Edit</a> </td></tr><tr style="border:1px solid #ccc"><td style="border:1px solid #ccc"><span style="font-weight:bold;font-size:13px;padding-left:60px;color:#33B940">task2</span></td><td style="border:1px solid #ccc">Development</td><td style="border:1px solid #ccc">John Doe</td><td style="border:1px solid #ccc">Active</td><td style="border:1px solid #ccc">100</td><td style="border:1px solid #ccc"><a href="http://10.103.3.96/timesheet_bijal/manage/edittask/index?project_id=478&amp;id=9311">Edit</a>/<a onclick="delete_task(9311,131,478)" style="cursor:pointer">Deactivate</a> </td></tr><tr style="border:1px solid #ccc"><td style="border:1px solid #ccc"><span style="font-weight:bold;font-size:13px;padding-left:40px;color:#0074a2">Development</span></td><td style="border:1px solid #ccc">Development</td><td style="border:1px solid #ccc">John Doe</td><td style="border:1px solid #ccc">Active</td><td style="border:1px solid #ccc">60</td><td style="border:1px solid #ccc"><a href="http://10.103.3.96/timesheet_bijal/manage/edittask/index?project_id=478&amp;id=133">Edit</a>/<a onclick="delete_task(133,130,478)" style="cursor:pointer">Deactivate</a> </td></tr><tr style="border:1px solid #ccc"><td style="border:1px solid #ccc"><span style="font-weight:bold;font-size:13px;padding-left:60px;color:#33B940">testing1</span></td><td style="border:1px solid #ccc">Development</td><td style="border:1px solid #ccc">John Doe</td><td style="border:1px solid #ccc">Active</td><td style="border:1px solid #ccc">100</td><td style="border:1px solid #ccc"><a href="http://10.103.3.96/timesheet_bijal/manage/edittask/index?project_id=478&amp;id=9312">Edit</a>/<a onclick="delete_task(9312,133,478)" style="cursor:pointer">Deactivate</a> </td></tr><tr style="border:1px solid #ccc"><td style="border:1px solid #ccc"><span style="font-weight:bold;font-size:13px;padding-left:40px;color:#0074a2">dev1</span></td><td style="border:1px solid #ccc">Development</td><td style="border:1px solid #ccc">John Doe</td><td style="border:1px solid #ccc">Active</td><td style="border:1px solid #ccc">100</td><td style="border:1px solid #ccc"><a href="http://10.103.3.96/timesheet_bijal/manage/edittask/index?project_id=478&amp;id=9308">Edit</a>/<a onclick="delete_task(9308,130,478)" style="cursor:pointer">Deactivate</a> </td></tr></tbody></table> 

<table> 
    <tr id="footerExport"> 
     <td id="exportpdf"><img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/pdf.png" title="Export to PDF" /></td> 
    </tr> 
</table> 

inklusive jquery Skripte für HTML-Tabelle Export

http://ngiriraj.com/pages/htmltable_export/demo.php 

Hier Projektaufgaben aufgeführt sind unten in Eltern-Kind-Beziehung und in einer Baumstruktur wie unten gezeigt

Die folgende Fiddle exportiert die Daten im PDF-Format, aber irgendwie wird die Baumansicht nicht gepflegt.

Fiddle Link

1) Wie kann ich zeigen die Daten im PDF-Format als in der beigefügten Bildansicht und Aufgabe, um die Aufrechterhaltung Baum gezeigt?

2) Wenn Sie auf das PDF-Symbol in Fiddle klicken, wird die Ausgabe in Firefox und nicht in Chrome angezeigt.

3) Wenn ich kein Plugin verwende, wie kann ich die angezeigte HTML-Struktur im PDF/Excel-Format unter Beibehaltung der Baumansicht exportieren?

Answer 1

Dies ist eine Lösung, aber es ist ein bisschen chaotisch. Ich habe einen speziellen ACSII-Code versucht, Leerzeichen oder Tabulatoren vorzugeben, aber sie haben nicht funktioniert. Also tat ich dies:

$(document).ready(function() { 
    $('#exportpdf').bind('click', function (e) { 
     $(".lvl1").prepend("|"); 
     $(".lvl2").prepend("| "); 
     $(".lvl3").prepend("| "); 
     $(".lvl4").prepend("|  "); 
     $('#activity').tableExport({ type: 'pdf', escape: 'false', htmlContent:'false' }); 
     $(".lvl1").text().substr(1); 
     $(".lvl2").text().substr(3); 
     $(".lvl3").text().substr(5); 
     $(".lvl4").text().substr(8); 
    }); 
}); 

Diese prepends den Text kurz vor der PDF-Erzeugung mit a | (kann ein beliebiges Zeichen von Ihrer Tastatur sein) und einige nachstehende Leerzeichen. Auf diese Weise ist Ihre Eltern-Kind-Beziehung in der PDF-Datei sichtbar, hat jedoch ein | auf jeder Tabellenzeile.

Auch müssen Sie die Klasse "level" zu jeder Zeile hinzufügen. Mit lvl1 als oberstes Elternteil und lvl 4 als unterstes Kind.

<span style="font-weight:bold;..." class="lvl1">Development</span> 

und die Räume zu entfernen, wenn das pdf erzeugt Sie substr verwenden. Die Zahl ist das zu startende Zeichen (nullbasiert, also 1 ist das zweite Zeichen einer Zeichenkette). Hoffe das löst deine Lösung.