Получение HTML-формы в PDF с помощью jsPDF

У меня есть форма, которую пользователи будут заполнять частично. После того, как они сделали все свои выборы, я хочу отобразить страницу как есть в PDF, а затем отправить ее по электронной почте. Я просто не могу уложить в голове учебники и примеры для него. В настоящее время у меня есть ссылки на jquery и jspdf в моем разделе head.

<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>

И это мой текущий сценарий функции - в основном то, что описано на десятках страниц здесь и в других местах.

<script type="text/javascript">
 $(function() {
   var specialElementHandlers = {
     '#editor': function (element,renderer) {
       return true;
    }
 };
 $('#cmd').click(function () {
    var doc = new jsPDF();
     doc.fromHTML($('#target').html(), 15, 15, {
      'width': 170,'elementHandlers': specialElementHandlers
      });
    });
      doc.output("dataurlnewwindow");
    });
  });
  </script>

Затем я запускаю свою форму и имею DIV, содержащий всю страницу, которую я хочу отобразить.

<body>
<form action="" method="post">
<div id="target">

Затем следуют все входные данные формы, затем я закрываю DIV и получаю кнопку, которая должна генерировать PDF

</div>
<p>
<button id="cmd">Generate PDF</button>
</p>
</form>
</body>
</html>

Я ничего не получаю. Независимо от того, что я сделал. Максимум, с чем я сталкивался, это пустая страница, но без содержимого. Любая помощь, направляющая меня в правильном направлении, будет принята с благодарностью!


pdf forms html jquery jspdf
person UniCav    schedule 20.09.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Этот фрагмент, кажется, работает, но не уверен, что это то, что вы хотите. Я исправил синтаксис и переместил переменную doc внутрь функции щелчка.

Что касается проблемы с пустым PDF, https://github.com/MrRio/jsPDF/issues/130 и https://github.com/MrRio/jsPDF/issues/270 может помочь.

<html>

<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
    <script type="text/javascript">
    $(function() {
    var specialElementHandlers = {
        '#editor': function(element, renderer) {
            return true;
        }
    };
    $('#cmd').click(function() {
        var doc = new jsPDF();
        doc.fromHTML($('#target').html(), 15, 15, {
            'width': 170,
            'elementHandlers': specialElementHandlers
        });
        doc.output("dataurlnewwindow");
    });
    });
    </script>
</head>

<body>
    <form action="" method="post">
        <div id="target">
        <input type="text" value="Nishant"/>
        </div>
        <p>
            <button id="cmd">Generate PDF</button>
        </p>
    </form>
</body>

</html>
person Nishant    schedule 20.09.2016
comment
Это заставляет его создавать PDF, но да, он пустой. Мне придется начать копаться с html2canvas или rasterizeHTML и посмотреть, смогу ли я заставить его работать. Первоначально я собирался попытаться объединить исходный PDF-файл со значениями POST, но после некоторого чтения я подумал, что будет проще или эффективнее сделать это таким образом. - person UniCav; 20.09.2016
comment
Существуют серверные решения, такие как wkhtmltopdf, weasyprint и т. д. Также есть Prince XML и PDF Reactor, если вам нужны лицензионные. - person Nishant; 20.09.2016
comment
Я тоже видел их во многих постах. Обратной стороной всего этого, конечно же, является то, что я не программист, и мне приходится собирать все это воедино и реконструировать из примеров, что мне каким-то образом удается делать большую часть времени. Пока это было больше, чем я могу вынести. Неудачный побочный эффект того, чтобы быть универсальным ИТ-специалистом, который должен перейти от установки оборудования в один день к переписыванию всех веб-форм на следующий. - person UniCav; 21.09.2016