Question

我想从html页面创建一个pdf，但是一旦导出就必须可编辑。我尝试使用JsPDF，但目前卡住了。

目前我唯一的结果是该按钮导出PDF，但它是空白的，它没有考虑我的表格。请参阅下面的代码。

＆＃13;

$(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');
  });
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

首先，您必须向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();
            });
          }
        });

使用JsPDF创建可编辑的PDF

1 个答案: