Генератор определения документа pdfmake

Я пытаюсь запустить проект, в котором я могу легко редактировать DocDefinitions для pdfmake. У меня есть исходный код, размещенный на GitHub, если кому-то интересно посмотреть: https://github.com/unluckynelson/pdfmake-generator

Вот демонстрация того, что у меня есть: http://powerprop.co.za/pdfmake-generator/

Идея в основном состоит в том, чтобы дать пользователю возможность редактировать текстовое поле 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>

Проанализировано как объект JS:

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: []
                    }
                }
            ]
        }
    }
}

javascript pdfmake
person johan    schedule 19.05.2017    source источник
comment
Говоря о преобразовании... Вы можете реализовать преобразователь dom в объект. Но в настоящее время я вижу, что объект неверен   -  person Alex Slipknot    schedule 22.05.2017
comment
Я гуглил конвертер dom в объект, конвертер html в объект и т. Д. ... ничего не выходит. Вы имеете в виду что-то конкретное? связь? Объект - это просто мой пример того, как я думаю, что он должен выглядеть...   -  person johan    schedule 22.05.2017
comment
Я могу написать пример с вашим случаем. Но я все еще не могу этого сделать из-за неправильного формата obj. Можете ли вы предоставить правильный объект?   -  person Alex Slipknot    schedule 22.05.2017
comment
Это всего лишь пример того, как, по моему мнению, это может выглядеть, любой объект на самом деле может быть полезен, если большая часть информации DOM находится внутри объекта логическим образом. Затем я могу получить доступ к тому, что мне нужно, с помощью циклов и тому подобного....   -  person johan    schedule 22.05.2017
comment
Конечно, но я хочу увидеть структуру объекта, которая вам нужна.   -  person Alex Slipknot    schedule 22.05.2017
comment
ну, окончательная структура, необходимая pdfmake, выглядит так: unluckynelson/pdfmake-generator/blob/master/ ... Это создает счет, который выглядит следующим образом: powerprop.co.za/pdfmake-generator/print.pdf.php   -  person johan    schedule 22.05.2017
comment
Хорошо, как я вижу, формат очень специфичен, поэтому вам нужно написать конвертер с этими спецификациями. Невозможно автоматически преобразовать dom в объект без спецификаций объекта.   -  person Alex Slipknot    schedule 22.05.2017
comment
Я согласен, но наверняка есть какой-то javascript-способ доступа к DOM через методы объекта? Мне просто нужно представление объекта javascript для DOM, оттуда я могу написать код для создания окончательного объекта так, как я хочу   -  person johan    schedule 22.05.2017
comment
Конечно вы можете. См. ответ здесь: stackoverflow.com/questions/6280814/   -  person Alex Slipknot    schedule 22.05.2017

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете использовать $.parseHTML(htmlString) метод jQuery для анализа строки html в объект DOM, который имеет очень исчерпывающий список узлов, с которыми можно поиграться: классы, стили, узлы, тексты, дочерние узлы и т. д. Конечно, это не тот JS-объект, который вам нужен, но почему бы не использовать универсальную структуру? Вы можете рекурсивно отслеживать узлы, получать информацию о классе/стиле и многое другое!

Давайте рассмотрим базовый минимальный пример:

var text = '<table class="table table-condensed" border ="1">' +
           '  <tr>' +
           '    <td>Some text' +
           '      <div>Nested Div</div>' +
           '    </td>' +
           '    <td>Another text</td>' +
           '  </tr>' +
           '</table>' +
           '<span>Heeey' +
           '</span>';
           
var $log = $("#log"),
  $output = $("#output"),
  html = $.parseHTML(text);
 
// Append the parsed HTML
$output.append(html);
 
// Gather the parsed HTML's node names etc.
$.each(html, function(i, el) {
  $log.append("<li>nodeName: " + el.nodeName + "</li>");
  $log.append("<ul><li>childNodes count: " + el.childNodes.length + "</li></ul>");
  $log.append("<ul><li>classNames: " + el.className + "</li></ul>");
  $log.append("<ul><li>textContent: " + el.textContent + "</li></ul>");
  console.log(el);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="output">Nodes will be here:</div>
<hr />
<ul id="log">
  <li>Initial log text.</li>
</ul>

Вы можете увидеть фактические свойства узла из консоли Firefox (F12), когда запускаете фрагмент, щелкая каждый узел.

person Emre Piskin    schedule 27.05.2017
comment
Сэр, если вы заглянете в репозиторий OP, вы узнаете, что он использует Angular. Цепочка jquery там совершенно бессмысленна. Кроме того, tinymce содержит методы API для анализа или сериализации DOM. - person kWeglinski; 27.05.2017

arrow_upward
0
arrow_downward

Я считаю, что в tinymce должен быть какой-то вызов API (вы можете проверить документы). Хотя сейчас не нашел.

Наверняка есть сериализатор API для строки. Который преобразует всю структуру DOM, созданную внутри вашей текстовой области, в строку. Затем вы можете использовать библиотеку html-to-json https://www.npmjs.com/package/html-to-json или написать свой собственный парсер, который будет довольно легко написать, начиная со знака <, заканчивая знаком > или />, затем, если !/>, </ [...]> несколько регулярных выражений. Основная проблема заключалась бы в том, чтобы исключить введенный пользователем текст (tinymce должен избегать их).

редактировать: вот сериализатор https://www.tinymce.com/docs-3x//api/dom/class_tinymce.dom.Serializer.html/ serialize(node:DOMNode, args:Object):void : Serializes the specified browser DOM node into a HTML string.

person kWeglinski    schedule 27.05.2017