Javascript pdfmake文档定义生成器_Javascript_Pdfmake

Javascript pdfmake文档定义生成器

javascript

Javascript pdfmake文档定义生成器,javascript,pdfmake,Javascript,Pdfmake,我正试图开始一个项目，我可以很容易地编辑文档定义。如果有人有兴趣查看，我会在GitHub上共享初始代码：以下是我的演示：其基本思想是让用户能够编辑TinyMCE文本区域，并在同一页面上显示生成的pdf的结果，从而使可视化编辑非常容易进行和更新我的问题是：有没有办法解析HTML？（由TinyMCE生成）转换为Javascript对象，例如，一个简单的表如下所示： HTML文本 <html> <table class="table table-condensed">

我正试图开始一个项目，我可以很容易地编辑文档定义。如果有人有兴趣查看，我会在GitHub上共享初始代码：

以下是我的演示：

其基本思想是让用户能够编辑TinyMCE文本区域，并在同一页面上显示生成的pdf的结果，从而使可视化编辑非常容易进行和更新

我的问题是：有没有办法解析HTML？（由TinyMCE生成）转换为Javascript对象，例如，一个简单的表如下所示：

HTML文本

<html>
<table class="table table-condensed">
    <tr>
        <td>Some text
            <div>Nested Div</div>
        </td>
        <td></td>
    </tr>
</table>
</html>

您可以使用

$.parseHTML（htmlString）

将html字符串解析为DOM对象，该对象具有非常全面的节点列表：类、样式、节点、文本、子节点等。当然，您想要的不是确切的JS对象，但为什么不使用通用结构呢？您可以递归地跟踪节点，获取类/样式信息，甚至更多

让我们看一个基本的最小值示例：

var text=''+
'  ' +
“一些文本”+
“嵌套Div”+
'    ' +
“另一个文本”+
'  ' +
'' +
“嘿”+
'';
var$log=$（“#log”），
$output=$（“#output”），
html=$.parseHTML（文本）；
//附加解析后的HTML
$output.append（html）；
//收集解析后的HTML节点名等。
$.each（html、函数（i、el）{
$log.append（“nodeName:+el.nodeName+””）；
$log.append（“子节点计数：“+el.childNodes.length+””）；
$log.append（“类名：“+el.className+””）；
$log.append（“textContent:+el.textContent+””）；
控制台日志（el）；
});

节点将位于此处：


初始日志文本
我认为tinymce中应该有一些API调用（您可以查看文档）。但是现在找不到
确实有一个API序列化程序用于字符串。它将在textarea中创建的整个DOM结构转换为字符串。然后，您可以使用库html转换json，或者编写自己的解析器，这将非常容易编写，从
或/>
结束，然后如果！/>，
一些正则表达式。主要问题是排除用户类型（tinymce应该转义它们）
编辑：这是序列化程序
serialize（节点：DOMNode，args:Object）：void：将指定的浏览器DOM节点序列化为HTML字符串。
谈论转换。。。您可以实现dom到对象转换器。但目前我发现对象是不正确的，我一直在用谷歌搜索dom到对象转换器、html到对象转换器等等。。。没有什么是有用的。你有什么具体的事情要说吗？链接这个对象只是我认为它应该是什么样子的例子…我可以用你的案例写一些例子。但由于obj格式不正确，我还是做不到。你能提供正确的对象吗？这只是我认为它可能看起来像的一个例子，只要DOM的大部分信息以逻辑方式在对象内部，任何对象实际上都是有用的。然后我可以通过循环之类的东西来访问我需要的东西……当然，但我想看看你们需要搜索的对象结构，若你们查看OP repo，你们就会知道他使用的是角度。在那里链接jquery是毫无意义的。此外-tinymce本身还包含一个用于解析或序列化DOM的api方法。
var obj = {
    html: {
        table: {
            classes: ["table", "table-condensed"],
            styles: [],
            tr: [
                {
                    td: {
                        classes: [],
                        styles: [],
                        text: [{"Some text "}, {
                            div: {
                                classes: [],
                                styles: [],
                                text: "Nested Div"
                            }
                        }]
                    }
                },
                {
                    td: {
                        classes: [],
                        styles: [],
                        text: []
                    }
                }
            ]
        }
    }
}