Question

您好我正在尝试使用JsPDF将html内容转换为pdf文件，但它转换为pdf文件。但该文件包含空的pdf文件。没有内容显示为标题图像和日期。任何身体可以告诉我这是什么问题吗？

 
 $("#btn-add").on('click', function () {
            var hDate ="Test";
            $('#heDate').html(hDate);
            var pdf = new jsPDF();
            var specialElementHandlers = {
            '#editor': function (element, renderer) {
                         return true;
                     }
                 };
         pdf.fromHTML($('#cover').html(), 15, 15, {
                     'width': 170,
                     'elementHandlers': specialElementHandlers
                 });
               pdf.save('sample-file.pdf');
         
             }  

        });

<script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../Scripts/CoverLetter.js"></script> 
  <script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/jspdf/1.2.61/jspdf.min.js"></script>
       <script type="text/javascript" src="../Scripts/html2canvas.js"></script>
          
 <div id="cover" class="formarea">
 <table> 
 <tr> 
   <td><img src="../Images/Header.png" /></td>
 </tr>
  <tr>  
    <td>
        <div> 
            <label> Date: </label>
            <label id="heDate">  </label>
        </div>
        <div id="editor"></div>
   </td>
  </tr> 
</table> 
</div>  

<table> 
   
   <tr>       
    <td>
      
      <button  type="button" id="btn-add"  class="btn">Create Letter</button> 
     </td>       
   </tr>   
    
</table>

Answer 1

我的测试代码在我的本地工作。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.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 () {
            $("#btn-add").on('click', function () {
                var hDate = "Test";
                $('#heDate').html(hDate);
                var pdf = new jsPDF();
                var specialElementHandlers = {
                    '#editor': function (element, renderer) {
                        return true;
                    }
                };                
                pdf.fromHTML($('#cover')[0], 15, 15, {
                    'width': 170,
                    'elementHandlers': specialElementHandlers
                },
                function (dispose) {
                    // dispose: object with X, Y of the last line add to the PDF 
                    // this allow the insertion of new lines after html
                    pdf.save('Test.pdf');
                });

            });
        })
    </script>
</head>
<body>
    <div id="cover" class="formarea">
        <table>
            <tr>
                <td><img src="../Images/Header.png" /></td>
            </tr>
            <tr>
                <td>
                    <div>
                        <label> Date: </label>
                        <label id="heDate">  </label>
                    </div>
                    <div id="editor"></div>
                </td>
            </tr>
        </table>
    </div>

    <table>

        <tr>
            <td>

                <button type="button" id="btn-add" class="btn">Create Letter</button>
            </td>
        </tr>

    </table>
</body>
</html>

无法将Html内容转换为Pdf

1 个答案: