I am trying to make an application, which contains html tables.
I want a download button, and onClick event, downloads a PDF file containing all the html tables in it.
Can it be done?
Can someone help me with a function that converts the html table into an object so that it can be pushed into a PDF file through pdfmake?
I found a working solution over here: https://github.com/bpampuch/pdfmake/issues/205
function ParseContainer(cnt, e, p, styles) {
var elements = [];
var children = e.childNodes;
if (children.length != 0) {
for (var i = 0; i < children.length; i++) p = ParseElement(elements, children[i], p, styles);
}
if (elements.length != 0) {
for (var i = 0; i < elements.length; i++) cnt.push(elements[i]);
}
return p;
}
function ComputeStyle(o, styles) {
for (var i = 0; i < styles.length; i++) {
var st = styles[i].trim().toLowerCase().split(":");
if (st.length == 2) {
switch (st[0]) {
case "font-size":{
o.fontSize = parseInt(st[1]);
break;
}
case "text-align": {
switch (st[1]) {
case "right": o.alignment = 'right'; break;
case "center": o.alignment = 'center'; break;
}
break;
}
case "font-weight": {
switch (st[1]) {
case "bold": o.bold = true; break;
}
break;
}
case "text-decoration": {
switch (st[1]) {
case "underline": o.decoration = "underline"; break;
}
break;
}
case "font-style": {
switch (st[1]) {
case "italic": o.italics = true; break;
}
break;
}
}
}
}
}
function ParseElement(cnt, e, p, styles) {
if (!styles) styles = [];
if (e.getAttribute) {
var nodeStyle = e.getAttribute("style");
if (nodeStyle) {
var ns = nodeStyle.split(";");
for (var k = 0; k < ns.length; k++) styles.push(ns[k]);
}
}
switch (e.nodeName.toLowerCase()) {
case "#text": {
var t = { text: e.textContent.replace(/\n/g, "") };
if (styles) ComputeStyle(t, styles);
p.text.push(t);
break;
}
case "b":case "strong": {
//styles.push("font-weight:bold");
ParseContainer(cnt, e, p, styles.concat(["font-weight:bold"]));
break;
}
case "u": {
//styles.push("text-decoration:underline");
ParseContainer(cnt, e, p, styles.concat(["text-decoration:underline"]));
break;
}
case "i": {
//styles.push("font-style:italic");
ParseContainer(cnt, e, p, styles.concat(["font-style:italic"]));
//styles.pop();
break;
//cnt.push({ text: e.innerText, bold: false });
}
case "span": {
ParseContainer(cnt, e, p, styles);
break;
}
case "br": {
p = CreateParagraph();
cnt.push(p);
break;
}
case "table":
{
var t = {
table: {
widths: [],
body: []
}
}
var border = e.getAttribute("border");
var isBorder = false;
if (border) if (parseInt(border) == 1) isBorder = true;
if (!isBorder) t.layout = 'noBorders';
ParseContainer(t.table.body, e, p, styles);
var widths = e.getAttribute("widths");
if (!widths) {
if (t.table.body.length != 0) {
if (t.table.body[0].length != 0) for (var k = 0; k < t.table.body[0].length; k++) t.table.widths.push("*");
}
} else {
var w = widths.split(",");
for (var k = 0; k < w.length; k++) t.table.widths.push(w[k]);
}
cnt.push(t);
break;
}
case "tbody": {
ParseContainer(cnt, e, p, styles);
//p = CreateParagraph();
break;
}
case "tr": {
var row = [];
ParseContainer(row, e, p, styles);
cnt.push(row);
break;
}
case "td": {
p = CreateParagraph();
var st = {stack: []}
st.stack.push(p);
var rspan = e.getAttribute("rowspan");
if (rspan) st.rowSpan = parseInt(rspan);
var cspan = e.getAttribute("colspan");
if (cspan) st.colSpan = parseInt(cspan);
ParseContainer(st.stack, e, p, styles);
cnt.push(st);
break;
}
case "div":case "p": {
p = CreateParagraph();
var st = {stack: []}
st.stack.push(p);
ComputeStyle(st, styles);
ParseContainer(st.stack, e, p);
cnt.push(st);
break;
}
default: {
console.log("Parsing for node " + e.nodeName + " not found");
break;
}
}
return p;
}
function ParseHtml(cnt, htmlText) {
var html = $(htmlText.replace(/\t/g, "").replace(/\n/g, ""));
var p = CreateParagraph();
for (var i = 0; i < html.length; i++) ParseElement(cnt, html.get(i), p);
}
function CreateParagraph() {
var p = {text:[]};
return p;
}
//currently should be wraped in tag div or span
var simpleHtm = "<div>";
simpleHtm += "This is <u>simple</u> html parser demo.<br>";
simpleHtm += "<p style='font-size:20px; text-align:center'>You can set font
size and align from style</p>";
simpleHtm += "<table border='1'><tr><td>you</td><td>can</td></tr><tr> <td>use</td><td>tables</td></tr></table>"
simpleHtm += "<table border='1' widths='30%,60%'><tr><td>or</td><td>set</td></tr><tr><td>table</td><td>width from html</td></tr></table><br>"
simpleHtm += "<table border='1' widths='20%,50%'><tr><td>nested</td><td>table</td></tr><tr><td><table border='1'><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table></td><td></td></tr></table>"
simpleHtm += "</div>";
content = [];
ParseHtml(content, simpleHtm);
pdfMake.createPdf({content: content}).download();
You can get the HTML code of any HTML element(I am demonstrating table) using the following code & call the ParseHTML function:
var simpleHtm = $('#TableID').prop('outerHTML');
ParseHtml(tablecontent, simpleHtm);
Looking at the PDFMake getting started page, you have to format your table like this:
var docDefinition = {
content: [{
table: {
// headers are automatically repeated if the table spans over multiple pages
// you can declare how many rows should be treated as headers
headerRows: 1,
widths: [ '*', 'auto', 100, '*' ],
body: [
[ 'First', 'Second', 'Third', 'The last one' ],
[ 'Value 1', 'Value 2', 'Value 3', 'Value 4' ],
[ { text: 'Bold value', bold: true }, 'Val 2', 'Val 3', 'Val 4' ]
]
}
}]
};
So you would take your table and get eh widths of each column and then cycle through the rows to create the body array:
function createTableDoc() {
var table = document.getElementById("table");
var wdths;
for (var i = 0; i < table.rows[0].cells.length; i++) {
var cell = table.rows[0].cells[i];
widths[i] = (cell.style.width != ""? cell.style.width : cell.style.offsetWidth); //if the cell's style width is not set, get its' actual width
}
var bdy;
for (var y = 0; y < table.rows.length; y++)
for (var x = 0; x < table.rows[y].cells.length; x++) {
body[y][x] = table.rows[y].cells[x].innerHTML;
var docDef = { content: [{ table: { headerRows: 1, widths: wdths, body: bdy } }] };
return docDef;
}
The full working solution from here. Try yourself running here the example. If you have a main container div with a id="test", with this set of functions you just need to call pdfForElement('test').download();
function pdfForElement(id) {
function ParseContainer(cnt, e, p, styles) {
var elements = [];
var children = e.childNodes;
if (children.length != 0) {
for (var i = 0; i < children.length; i++) p = ParseElement(elements, children[i], p, styles);
}
if (elements.length != 0) {
for (var i = 0; i < elements.length; i++) cnt.push(elements[i]);
}
return p;
}
function ComputeStyle(o, styles) {
for (var i = 0; i < styles.length; i++) {
var st = styles[i].trim().toLowerCase().split(":");
if (st.length == 2) {
switch (st[0]) {
case "font-size":
{
o.fontSize = parseInt(st[1]);
break;
}
case "text-align":
{
switch (st[1]) {
case "right":
o.alignment = 'right';
break;
case "center":
o.alignment = 'center';
break;
}
break;
}
case "font-weight":
{
switch (st[1]) {
case "bold":
o.bold = true;
break;
}
break;
}
case "text-decoration":
{
switch (st[1]) {
case "underline":
o.decoration = "underline";
break;
}
break;
}
case "font-style":
{
switch (st[1]) {
case "italic":
o.italics = true;
break;
}
break;
}
}
}
}
}
function ParseElement(cnt, e, p, styles) {
if (!styles) styles = [];
if (e.getAttribute) {
var nodeStyle = e.getAttribute("style");
if (nodeStyle) {
var ns = nodeStyle.split(";");
for (var k = 0; k < ns.length; k++) styles.push(ns[k]);
}
}
switch (e.nodeName.toLowerCase()) {
case "#text":
{
var t = {
text: e.textContent.replace(/\n/g, "")
};
if (styles) ComputeStyle(t, styles);
p.text.push(t);
break;
}
case "b":
case "strong":
{
//styles.push("font-weight:bold");
ParseContainer(cnt, e, p, styles.concat(["font-weight:bold"]));
break;
}
case "u":
{
//styles.push("text-decoration:underline");
ParseContainer(cnt, e, p, styles.concat(["text-decoration:underline"]));
break;
}
case "i":
{
//styles.push("font-style:italic");
ParseContainer(cnt, e, p, styles.concat(["font-style:italic"]));
//styles.pop();
break;
//cnt.push({ text: e.innerText, bold: false });
}
case "span":
{
ParseContainer(cnt, e, p, styles);
break;
}
case "br":
{
p = CreateParagraph();
cnt.push(p);
break;
}
case "table":
{
var t = {
table: {
widths: [],
body: []
}
}
var border = e.getAttribute("border");
var isBorder = false;
if (border)
if (parseInt(border) == 1) isBorder = true;
if (!isBorder) t.layout = 'noBorders';
ParseContainer(t.table.body, e, p, styles);
var widths = e.getAttribute("widths");
if (!widths) {
if (t.table.body.length != 0) {
if (t.table.body[0].length != 0)
for (var k = 0; k < t.table.body[0].length; k++) t.table.widths.push("*");
}
} else {
var w = widths.split(",");
for (var k = 0; k < w.length; k++) t.table.widths.push(w[k]);
}
cnt.push(t);
break;
}
case "tbody":
{
ParseContainer(cnt, e, p, styles);
//p = CreateParagraph();
break;
}
case "tr":
{
var row = [];
ParseContainer(row, e, p, styles);
cnt.push(row);
break;
}
case "td":
{
p = CreateParagraph();
var st = {
stack: []
}
st.stack.push(p);
var rspan = e.getAttribute("rowspan");
if (rspan) st.rowSpan = parseInt(rspan);
var cspan = e.getAttribute("colspan");
if (cspan) st.colSpan = parseInt(cspan);
ParseContainer(st.stack, e, p, styles);
cnt.push(st);
break;
}
case "div":
case "p":
{
p = CreateParagraph();
var st = {
stack: []
}
st.stack.push(p);
ComputeStyle(st, styles);
ParseContainer(st.stack, e, p);
cnt.push(st);
break;
}
default:
{
console.log("Parsing for node " + e.nodeName + " not found");
break;
}
}
return p;
}
function ParseHtml(cnt, htmlText) {
var html = $(htmlText.replace(/\t/g, "").replace(/\n/g, ""));
var p = CreateParagraph();
for (var i = 0; i < html.length; i++) ParseElement(cnt, html.get(i), p);
}
function CreateParagraph() {
var p = {
text: []
};
return p;
}
content = [];
ParseHtml(content, document.getElementById(id).outerHTML);
return pdfMake.createPdf({
content: content
});
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<div id="test">
This is <u>simple</u> html parser demo.
<br>
<p style='font-size:20px; text-align:center'>You can set font size and align from style</p>
<table border='1'>
<tr>
<td>you</td>
<td>can</td>
</tr>
<tr>
<td>use</td>
<td>tables</td>
</tr>
</table>
<table border='1' widths='30%,60%'>
<tr>
<td>or</td>
<td>set</td>
</tr>
<tr>
<td>table</td>
<td>width from html</td>
</tr>
</table>
<br>
<table border='1' widths='20%,50%'>
<tr>
<td>nested</td>
<td>table</td>
</tr>
<tr>
<td>
<table border='1'>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
</div>
<br>
<input type="button" value="Download PDF" onclick="pdfForElement('test').download();">
