PDFmake - html表格到pdfmake表格？ [英] PDFmake - html table to pdfmake table?

问题描述

我想要一个下载按钮和onClick事件，下载一个包含所有html表格的PDF文件在它里面。

可以这样做吗？

有人可以帮助我将函数转换成一个对象，以便它可以通过pdfmake推入PDF文件吗？

$ b $我在这里找到了一个工作解决方案：
rel =noreferrer> https://github.com/bpampuch/pdfmake/issues/205

 函数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）; （elements.length！= 0）{
 for（var i = 0; i< elements.length; i ++）cnt.push（elements [i]）; 
} 
} 
 return p; 
} 
 
函数ComputeStyle（o，styles）{
 for（var i = 0; i< styles.length; i ++）{
 var st = styles [I] .trim（）toLowerCase（）分割（ ：）;。。 
 if（st.length == 2）{
 switch（st [0]）{
 casefont-size：{
 o.fontSize = parseInt（st [ 1]）; 
休息; 
} 
 casetext-align：{
 switch（st [1]）{
 caseright：o.alignment ='right';打破; 
 casecenter：o.alignment ='center';打破; 
} 
 break; 
} 
 casefont-weight：{
 switch（st [1]）{
 casebold：o.bold = true;打破; 
} 
 break; 
} 
 casetext-decoration：{
 switch（st [1]）{
 caseunderline：o.decoration =underline;打破; 
} 
 break; 
} 
 casefont-style：{
 switch（st [1]）{
 caseitalic：o.italics = true;打破; 
} 
 break; 
 
 
 
 
 
 $ b函数ParseElement（cnt，e，p，styles）{
 if （！styles）styles = []; 
 if（e.getAttribute）{
 var nodeStyle = e.getAttribute（style）; 
 if（nodeStyle）{
 var ns = nodeStyle.split（;）; （var k = 0; k< ns.length; k ++）styles.push（ns [k]）的
; 
 
 
 
 switch（e.nodeName.toLowerCase（））{
 case#text：{
 var t = {text： e.textContent.replace（/ \\\
 / g，）}; 
 if（styles）ComputeStyle（t，styles）; 
 p.text.push（t）; 
休息; 
} 
 caseb：casestrong：{
 //styles.push(\"font-weight:bold）; 
 ParseContainer（cnt，e，p，styles.concat（[font-weight：bold]））; 
休息; 
} 
 caseu：{
 //styles.push(\"text-decoration:underline）; 
 ParseContainer（cnt，e，p，styles.concat（[text-decoration：underline]））; 
休息; 
} 
 casei：{
 //styles.push(\"font-style:italic）; 
 ParseContainer（cnt，e，p，styles.concat（[font-style：italic]））; 
 //styles.pop（）; 
休息; 
 //cnt.push（{text：e.innerText，bold：false}）; 
} 
 casespan：{
 ParseContainer（cnt，e，p，styles）; 
休息; 
} 
 casebr：{
 p = CreateParagraph（）; 
 cnt.push（p）; 
休息; 
} 
 casetable：
 {
 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（t.table.body.length！= 0）{
 if（t.table.body [0] .length！= 0）for（
）for var k = 0; k } 
} else {
 var w = widths.split（，）; （var k = 0; k ; 
} 
 cnt.push（t）; 
休息; 
} 
 casetbody：{
 ParseContainer（cnt，e，p，styles）; 
 // p = CreateParagraph（）; 
休息; 
} 
 casetr：{
 var row = []; 
 ParseContainer（row，e，p，styles）; 
 cnt.push（row）; 
休息; 
} 
 casetd：{
 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）; 
休息; 
} 
 casediv：casep：{
 p = CreateParagraph（）; 
 var st = {stack：[]} 
 st.stack.push（p）; 
 ComputeStyle（st，styles）; 
 ParseContainer（st.stack，e，p）; 
 
 cnt.push（st）; 
休息; 
} 
 default：{
 console.log（Parsing for node+ e.nodeName +not found）; 
休息; 
} 
} 
 return p; 
 
 
函数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）; 
} 
 
函数CreateParagraph（）{
 var p = {text：[]}; 
 return p; 
} 
 
 //目前应该用标签div或跨度
 var simpleHtm =< div>包装; 
 simpleHtm + =这是< u>简单的<> html解析器演示。< br>; 
 simpleHtm + =< p style ='font-size：20px; text-align：center'>您可以设置字体
的大小并从样式< / p>中对齐; 
 simpleHtm + =< table border ='1'>< tr>< td>您< / td>< td>可< / td>< / tr>< tr><< ; TD>使用< / TD>< TD>表< / TD>< / TR>< /表>中
 simpleHtm + =< table border ='1'widths = '30％，60％'>< tr>< td>或< / td>< td> set< / td><< td>< ; / tr>< tr>< td>< td>< td>< td> width from html< / td>< / tr>< / table>< br> 
 simpleHtm + =< table border ='1'widths = '20％，50％'>< tr>< td>嵌套< / td>< td>表< / td><< td> ; / tr>< tr>< td>< table border ='1>< tr>< td> 1< / td>< td> 2< / td>< / tr>< ; TR>< TD> 3'; / TD>< TD> 4℃; / TD>< / TR>< /表>< / TD>< TD>< / TD>< / TR> < /表>中
 
 simpleHtm + =< / div>; 
 content = []; 
 ParseHtml（content，simpleHtm）; 
 pdfMake.createPdf（{content：content}）。download（）; 
  

您可以使用以下代码和放大器获取任何HTML元素的HTML代码（我正在演示表格） ;调用ParseHTML函数：

  var simpleHtm = $（'＃TableID'）。prop（'outerHTML'）; 
 ParseHtml（tablecontent，simpleHtm）; 
  

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);

这篇关于PDFmake - html表格到pdfmake表格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！