HTML2pdf/tcpdf с использованием php не работает должным образом

Question

Я хочу получить контент из HTML и хочу создать PDF-файл на его основе.
Я пробовал html2pdf, а также tcpdf. Но как-то в обоих местах я не работал, как я ожидал.

Я работаю над шаблоном счета-фактуры, который может быть изменен с веб-сайта. Но сейчас я сталкиваюсь с проблемой отображения в графическом интерфейсе с правильным выводом, но когда я пытаюсь использовать html2pdf, показывающий вывод, отличный от графического интерфейса пользователя.

Есть ли способ добиться этого?

Код:

<link rel="stylesheet" type="text/css" href="plugins/bootstrap-3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="plugins/font-awesome-4.5.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="../dist/css/keditor-1.1.4.css" />
<link rel="stylesheet" type="text/css" href="../dist/css/keditor-components-1.1.4.min.css" />
<link rel="stylesheet" type="text/css" href="css/examples.css" />
<script src="plugins/jquery-1.11.3/jquery-1.11.3.min.js"></script>
<script src="../examples/plugins/bootstrap-3.3.6/js/bootstrap.min.js"></script>
<script src="plugins/jquery.nicescroll-3.6.6/jquery.nicescroll.min.js"></script>
<script src="plugins/ckeditor-4.5.6/ckeditor.js"></script>
<script src="plugins/ckeditor-4.5.6/adapters/jquery.js"></script>
<script src="../dist/js/keditor-1.1.4.min.js"></script>
<script src="../dist/js/keditor-components-1.1.4.min.js"></script>
<div id="keditor-content-area-1500637983301" class="keditor-content-area ui-droppable ui-sortable">
        <section class="keditor-container keditor-initialized-container" id="keditor-container-1500637983322"><section class="keditor-container-inner">
            <div class="row">
                <div class="col-md-12 keditor-container-content ui-droppable ui-sortable" data-type="container-content" id="keditor-container-content-1500637983324">
                    <section data-type="component-text" class="keditor-component existing-component keditor-initialized-component" id="keditor-component-1500637983336"><section class="keditor-component-content cke_editable cke_editable_inline cke_contents_ltr cke_show_borders" id="keditor-component-content-1500637983337" tabindex="0" spellcheck="false" role="textbox" aria-label="false" aria-describedby="cke_49" contenteditable="true"><div class="page-header"><h1 style="margin-bottom: 30px; font-size: 50px;"><b class="text-uppercase">Welcome to KEditor</b> <small>Kademi Editor</small></h1><p class="lead"><em>It's open source editor based-on CKEditor with support drag and drop snippets. This example is using <a data-cke-saved-href="http://getbootstrap.com/" href="http://getbootstrap.com/" target="_blank">Bootstrap 3.3.6</a> for styling</em></p></div></section><div class="keditor-toolbar keditor-toolbar-component">   <a href="#" class="btn-component-reposition"><i class="fa fa-arrows"></i></a>   <a href="#" class="btn-component-duplicate"><i class="fa fa-files-o"></i></a>   <a href="#" class="btn-component-delete"><i class="fa fa-times"></i></a></div></section>
                    <section data-type="component-text" class="keditor-component existing-component keditor-initialized-component" id="keditor-component-1500637983350"><section class="keditor-component-content cke_editable cke_editable_inline cke_contents_ltr cke_show_borders" id="keditor-component-content-1500637983350" tabindex="0" spellcheck="false" role="textbox" aria-label="false" aria-describedby="cke_87" contenteditable="true"><div class="row"><div class="col-md-4 text-center"><img class="img-circle img-responsive" data-cke-saved-src="snippets/default/img/somewhere_bangladesh_squared.jpg" src="snippets/default/img/somewhere_bangladesh_squared.jpg"><h3>Lorem ipsum</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, alias, temporibus? Vero natus modi ipsa debitis, accusamus accusantium cum quam. Saepe atque quisquam pariatur voluptatem expedita nesciunt reprehenderit et vitae.</p></div><div class="col-md-4 text-center"><img class="img-circle img-responsive" data-cke-saved-src="snippets/default/img/wellington_newzealand_squared.jpg" src="snippets/default/img/wellington_newzealand_squared.jpg"><h3>Lorem ipsum</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, aut, earum. Quod, debitis, delectus. Maxime eius ipsam sit dolorum perspiciatis obcaecati consectetur, explicabo reprehenderit repellat tempore veniam eos ducimus! Dignissimos.</p></div><div class="col-md-4 text-center"><img class="img-circle img-responsive" data-cke-saved-src="snippets/default/img/yenbai_vietnam_squared.jpg" src="snippets/default/img/yenbai_vietnam_squared.jpg"><h3>Lorem ipsum</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil voluptatibus dicta corrupti aliquam, natus voluptatem pariatur quidem nostrum nisi corporis id ratione exercitationem et recusandae incidunt assumenda soluta qui odit.</p></div></div></section><div class="keditor-toolbar keditor-toolbar-component">   <a href="#" class="btn-component-reposition"><i class="fa fa-arrows"></i></a>   <a href="#" class="btn-component-duplicate"><i class="fa fa-files-o"></i></a>   <a href="#" class="btn-component-delete"><i class="fa fa-times"></i></a></div></section>
                </div>
            </div>
        </section><div class="keditor-toolbar keditor-toolbar-container">   <a href="#" class="btn-container-reposition"><i class="fa fa-sort"></i></a>   <a href="#" class="btn-container-duplicate"><i class="fa fa-files-o"></i></a>   <a href="#" class="btn-container-delete"><i class="fa fa-times"></i></a></div></section>
    </div>

Вывод вышеуказанного кода

Но когда я пытаюсь html2pdf или tcpdf, оба не показывают контент, как я вижу на веб-странице.

Он показывает одно изображение, а затем его содержимое, а затем другое изображение и его содержимое.