jquery – PDFmake – html表到pdfmake表?

前端之家收集整理的这篇文章主要介绍了jquery – PDFmake – html表到pdfmake表?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试创建一个包含html表的应用程序.

我想要一个下载按钮和onClick事件,下载包含所有html表格的PDF文件.

可以吗?

有人可以帮助我使用将html表转换为对象的函数,以便可以通过pdfmake将其推送到PDF文件中吗?

解决方法

我找到了一个有效的解决方案:
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],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,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,styles.concat(["font-weight:bold"]));
        break;
    }
    case "u": {
        //styles.push("text-decoration:underline");
        ParseContainer(cnt,styles.concat(["text-decoration:underline"]));
        break;
    }
    case "i": {
        //styles.push("font-style:italic");
        ParseContainer(cnt,styles.concat(["font-style:italic"]));
        //styles.pop();
        break;
        //cnt.push({ text: e.innerText,bold: false });
    }
    case "span": {
        ParseContainer(cnt,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,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,styles);
        //p = CreateParagraph();
        break;
    }
    case "tr": {
        var row = [];
        ParseContainer(row,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,styles);
        cnt.push(st);
        break;
    }
    case "div":case "p": {
        p = CreateParagraph();
        var st = {stack: []}
        st.stack.push(p);
        ComputeStyle(st,styles);
        ParseContainer(st.stack,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();

您可以使用以下代码获取任何HTML元素的HTML代码(我正在演示表格).调用ParseHTML函数

var simpleHtm = $('#TableID').prop('outerHTML');
            ParseHtml(tablecontent,simpleHtm);

猜你在找的jQuery相关文章