Преобразовать форму в PDF с полями ввода - PullRequest
Новая
       13

Преобразовать форму в PDF с полями ввода

1 голос
/ 13 мая 2019

Мне удалось преобразовать мой HTML-документ в PDF с помощью библиотеки jsPDF от MrRio.проблема в том, что мой контент - это форма.PDF-файл показывает имена полей, но я не могу получить их ввод. 

<div id="editor">
    <form id="content" class="text-center border border-light p-5" action="" method="POST">
        <!-- Full Name -->
        <div class="form-group row">
            <label class="col-sm-2 col-form-label">Full Name</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="inputFullName" placeholder="Full Name" required>
            </div>
        </div>
        <!-- Adress -->
        <div class="form-group row">
            <label class="col-sm-2 col-form-label">Adress</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="inputAdress" placeholder="Adress" required>
            </div>
        </div>
        <!-- E-mail -->
        <div class="form-group row">
            <label class="col-sm-2 col-form-label">Email</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="inputEmail" placeholder="Email" required>
            </div>
        </div>
        <!-- Password -->
        <div class="form-group row">
            <label class="col-sm-2 col-form-label">Password</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="inputPassword" placeholder="Password" required>
            </div>
        </div>
    </form>
</div>

Вот код javascript: 

$(function () {
    var specialElementHandlers = {
        '#editor': function (element,renderer) {
            return true;
        }
    };

    $('#cmd').click(function () {
        var doc = new jsPDF();
        doc.fromHTML(
            $('#content').html(), 15, 15, 
            { 'width': 170, 'elementHandlers': specialElementHandlers }, 
            function(){ doc.save('sample-file.pdf'); }
        );
});

Мне нужно получить форму с пользовательским вводом.

Я пробовал HTML для холста, а затем в PDF, а затем я попробовал это.По-видимому, существуют ограничения для реализации этого метода, так как он не поддерживает много элементов или классов.Если кто-то может предоставить идеи или полезную помощь.

1 Ответ

3 голосов
/ 13 мая 2019

Вы можете сделать это, запросив значения, введенные пользователем, используя jquery или чистый javascript.

Это фрагмент решения: 

<button id="cmd" class="btn btn-info my-4 btn-block" type="submit" onclick=" $(function () { 
   var doc = new jsPDF()
   doc.text('Full Name: \t\t\t'+document.querySelector(`#inputFullName`).value, 10, 10)
   doc.text('Adresse: \t\t\t'+document.querySelector(`#inputAdress`).value, 10, 20)
   //here do the same for the rest of your inputs
   doc.save('a4.pdf')
        });">Send</button>
<button class="btn btn-info my-4 btn-block" type="reset">Reset</button>
...