Создание редактируемого PDF с JsPDF - PullRequest
Новая
       13

Создание редактируемого PDF с JsPDF

0 голосов
/ 30 апреля 2018

Я хочу создать pdf из html-страницы, однако это должно быть редактируемым после экспорта. Я пытался использовать JsPDF для этого, но в настоящее время застрял.

На данный момент единственный результат, который у меня есть, это то, что кнопка экспортирует PDF, но она пустая, она не учитывает мою форму. Пожалуйста, смотрите мой код ниже. 

$(window).on('load', function () {
  var doc = new jsPDF();
  var specialElementHandlers = {
    '#inputext': function (element, renderer) {
      return true;
    }
  };
  $('#buttons').click(function () {
    doc.fromHTML($('#inputext').html(), 15, 15, {
      'width': 100,
      'elementHandlers': specialElementHandlers
    });
    doc.save('test.pdf');
  });
});
#inputext {

display: block;
width: 25%;
height: 20%;
margin-top: 10%;
margin-left: 15%;

}

form {

display: block;
border: 1px solid #000000;
width: 15%;
margin-left: 35%;
margin-top: 13%;
}

#buttons {

margin-left: 39%;
margin-bottom: 5%;

}

.info {

display: block;
width: 250%;
list-style:initial;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<html >

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet">

</head>

<body>

  <form id="form">

<div id="inputext">
<input type="text" placeholder="nom"></input>
<input type="text" placeholder="âge"></input>
<input type="text" placeholder="poids"></input>
<input type="text" placeholder="Taille"></input>
<input type="text" placeholder="Couleure de cheveux"></input>
<input type="text" placeholder="Couleure des yeux"></input>
<input type="text" placeholder="sexe"></input>

<input type="checkbox" name="key[]" value="1 "/>
<input type="checkbox" name="key[]" value="2 "/>
<input type="checkbox" name="key[]" value="3 "/>
<input type="checkbox" name="key[]" value="4 "/>

<input id="buttons" type="button" value="Exporter en PDF"/>
</div>

</div>

  </form>

</body>

<script src="JQuery.js"></script>
<script src="exportForm.js"></script>
<script src="jspdf.min.js"></script>
</html>

1 Ответ

0 голосов
/ 30 апреля 2018

Сначала вы должны добавить скрипт в ваш index.html для импорта jsPdf и html2canvas: 

<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

Вторая попытка конвертировать HTML в холст: 

$(document).ready(function(){
           $('#buttons').click(function () {
               html2canvas(document.getElementById('inputext')).then((canvasObj)=> {
               startPrintProcess(canvasObj, 'report',function (){});
      });

});
 function  startPrintProcess(canvasObj, fileName, callback) {
            var pdf = new jsPDF('p', 'mm', 'a4'),
              pdfConf = {
                pagesplit:false,
                background: '#fff',
              };
            document.body.appendChild(canvasObj); //appendChild is required for html to add page in pdf
            pdf.addHTML(canvasObj, 5, 5, pdfConf, function() {
              document.body.removeChild(canvasObj);
              // pdf.addPage();
              pdf.save(fileName + '.pdf');
              callback();
            });
          }
        });
...