Question

我有两个带有ID的div：element1和element2

在这些div之间，有一个按钮。在这些div之后，还有一个ID为pdf的按钮。

在div中有一个表和输入框。

    <div id="element1">
      Enter your name: <input><br>
      Enter your class: <input>
    </div>

    <button>Click on the button</button>

    <div id="element2">
      <table>
        <tr>
          <td>Name</td>
          <td>Class</td>
        </tr>
        <tr>
          <td><input></td>
          <td><input></td>
        </tr>
      </table>
    </div>

    <button id="pdf">Create pdf</button>

我是JS的初学者。现在，我想创建一个pdf文件，其中包含两个div的内容，不包括这两个按钮。此外，pdf文件必须包含在输入框中输入的值。 pdf可以包含任何格式的div内容，如text或jpg。

请帮助我，因为我是初学者。我已经尝试了很多jspdf，但它没有给我输出。

Answer 1

jspdf是正确的库。您可以做的是在将数据放入pdf之前操作数据。我认为你最好的选择是用你想要的或者你想要的元素替换输入。然后你可以建立你的PDF格式。我的选择是把它放在包装器中

＆＃13;

$('#pdf').click(function () {
    $('#PDFWrapper').find('input').each(function(){
        $(this).hide();
        $(this).after('<span>' + $(this).val() + '</span>');
    });
    $('#PDFWrapper').find('button').hide();
        
    var doc = new jsPDF();
    doc.fromHTML($('#PDFWrapper').html(), 10, 10, {
        'elementHandlers': {}
    });
    doc.save('download.pdf');
        
    $('#PDFWrapper').find('input').each(function(){
        $(this).show();
        $(this).next().remove();
    });
    $('#PDFWrapper').find('button').show();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<div id="PDFWrapper">
  <div id="element1">
    Enter your name: <input><br>
    Enter your class: <input>
  </div>

  <button>Click on the button</button>

  <div id="element2">
    <table>
      <tr>
        <td>Name</td>
        <td>Class</td>
      </tr>
      <tr>
        <td><input></td>
        <td><input></td>
      </tr>
    </table>
  </div>
</div>

<button id="pdf">Create pdf</button>

＆＃13;

在js中将div导出为pdf

1 个答案: