jquery 内容在jspdf中显示水平线

yvt65v4c  于 2023-06-22  发布在  jQuery
关注(0)|答案(1)|浏览(93)

我使用的是jsPDF,我在一个水平线上获取内容。我必须展示段落中的内容。
你知道如何打破它并展示它吗?
内容在代码和屏幕截图中都是虚拟的。

var doc = new jsPDF("portrait", "px", "a4");
var specialElementHandlers = {
  '#editor': function(element, renderer) {
    return true;
  }
};
$('#submit').click(function() {
  doc.fromHTML($('#content').html(), 15, 15, {
    'width': '100%',
    'elementHandlers': specialElementHandlers
  });

  addHeaderFooters();
  doc.save('sample-page.pdf');
});
//}

function addHeaderFooters() {
  const pageCount = doc.internal.getNumberOfPages();
  for (var i = 1; i <= pageCount; i++) {
    doc.text('Header Text', 40, 15, {
      baseline: 'top'
    });
    doc.text('Footer text', 10, 290, {
      baseline: 'bottom'
    });
  }
}
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<div id="content">
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ornare magna felis, ac rutrum nisl mattis nec. Pellentesque vel ultricies arcu. Morbi eu quam tortor. Aliquam sit amet diam lacus. Sed neque lorem, molestie eu leo nec, sagittis feugiat massa.
    Sed vitae leo mauris. Aliquam at ligula lorem. Aliquam erat volutpat. Aenean in lacus lorem. Donec in risus neque. Phasellus molestie arcu in orci scelerisque, et viverra diam vulputate. Aenean pretium placerat purus, ac commodo tortor molestie sed.
    Mauris commodo lectus et ullamcorper dapibus. Proin a velit nibh. Etiam aliquet, odio sodales mattis lobortis, sem dui mollis odio, in tempus turpis magna a neque. Cras bibendum dictum velit eu dapibus. Pellentesque eu libero iaculis, tempus lacus
    id, molestie est. Suspendisse mollis justo ut diam pharetra finibus. Mauris euismod felis id lacus condimentum aliquam. Phasellus in est turpis. Nulla non felis cursus diam pellentesque congue. Nunc volutpat, purus eu dictum consequat, sem neque vulputate
    lectus, ac ornare tortor leo sit amet nibh. Sed tortor purus, posuere tempor finibus aliquam, hendrerit aliquam neque. Nam vulputate urna non dolor tristique, in suscipit mauris consequat. Fusce ac dignissim augue, eget finibus augue. Pellentesque
    habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce nec pharetra sem, vitae semper lectus. Nullam nisi nisi, interdum ut urna sed, rutrum elementum lectus. In hac habitasse platea dictumst. Aliquam nec sem ac nisi
    consequat lacinia non et lectus. Sed nec vulputate urna. Nunc porta aliquet turpis nec rutrum. Integer sit amet tincidunt ligula. Duis elementum ultricies tempus. Donec dolor urna, pulvinar pellentesque pretium at, tincidunt eget risus. Suspendisse
    porttitor metus id leo fermentum, quis finibus leo rutrum. Nam semper, elit at suscipit ornare, justo metus bibendum massa, eget molestie ligula erat non metus. Sed congue justo a ligula pretium, ac tempor libero viverra. Mauris est leo, efficitur
    ac sem ut, feugiat ullamcorper neque. Praesent maximus commodo magna, a commodo nunc interdum vitae. Ut id urna pretium, sollicitudin massa eget, congue velit. Nunc felis mauris, vulputate non est eu, euismod tincidunt tortor. Nullam at neque sit
    amet dolor aliquet efficitur. Sed nulla massa, aliquam id lorem vitae, convallis vehicula nibh. Cras vulputate iaculis tortor eu luctus. Nulla vel leo sit amet nunc vehicula commodo. Quisque sollicitudin nibh ac ullamcorper imperdiet. </p>

</div>

<button id="submit">Export to  PDF</button>
4c8rllxm

4c8rllxm1#

我用新版本的JSPDF和break word创建了一个例子:

document.addEventListener("DOMContentLoaded", function() {
  const {
    jsPDF
  } = window.jspdf;
  var doc = new jsPDF("portrait", "px", "a4");
  $('#submit').click(function() {
    const width = $('#content')[0].width;
    doc.html($('#content')[0], {
      autoPaging: 'text',
      margin: [0, 20, 0, 0],
      callback: function(doc) {
        const pageCount = doc.internal.getNumberOfPages();
        for (var i = 1; i <= pageCount; i++) {
          doc.text('Header Text', 40, 15, {
            baseline: 'top'
          });
          doc.text('Footer text', 10, 290, {
            baseline: 'bottom'
          });
        }
        doc.save('test.pdf');
      },
      html2canvas: {
        width: '100'
      },
      x: 15,
      y: 20
    });
  });
});
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.3/purify.min.js" integrity="sha512-TBmnYz6kBCpcGbD55K7f4LZ+ykn3owqujFnUiTSHEto6hMA7aV4W7VDPvlqDjQImvZMKxoR0dNY5inyhxfZbmA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="content" style="font-size: 10px;">
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ornare magna felis, ac rutrum nisl mattis nec. Pellentesque vel ultricies arcu. Morbi eu quam tortor. Aliquam sit amet diam lacus. Sed neque lorem, molestie eu leo nec, sagittis feugiat massa.
    Sed vitae leo mauris. Aliquam at ligula lorem. Aliquam erat volutpat. Aenean in lacus lorem. Donec in risus neque. Phasellus molestie arcu in orci scelerisque, et viverra diam vulputate. Aenean pretium placerat purus, ac commodo tortor molestie sed.
    Mauris commodo lectus et ullamcorper dapibus. Proin a velit nibh. Etiam aliquet, odio sodales mattis lobortis, sem dui mollis odio, in tempus turpis magna a neque. Cras bibendum dictum velit eu dapibus. Pellentesque eu libero iaculis, tempus lacus
    id, molestie est. Suspendisse mollis justo ut diam pharetra finibus. Mauris euismod felis id lacus condimentum aliquam. Phasellus in est turpis. Nulla non felis cursus diam pellentesque congue. Nunc volutpat, purus eu dictum consequat, sem neque vulputate
    lectus, ac ornare tortor leo sit amet nibh. Sed tortor purus, posuere tempor finibus aliquam, hendrerit aliquam neque. Nam vulputate urna non dolor tristique, in suscipit mauris consequat. Fusce ac dignissim augue, eget finibus augue. Pellentesque
    habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce nec pharetra sem, vitae semper lectus. Nullam nisi nisi, interdum ut urna sed, rutrum elementum lectus. In hac habitasse platea dictumst. Aliquam nec sem ac nisi
    consequat lacinia non et lectus. Sed nec vulputate urna. Nunc porta aliquet turpis nec rutrum. Integer sit amet tincidunt ligula. Duis elementum ultricies tempus. Donec dolor urna, pulvinar pellentesque pretium at, tincidunt eget risus. Suspendisse
    porttitor metus id leo fermentum, quis finibus leo rutrum. Nam semper, elit at suscipit ornare, justo metus bibendum massa, eget molestie ligula erat non metus. Sed congue justo a ligula pretium, ac tempor libero viverra. Mauris est leo, efficitur
    ac sem ut, feugiat ullamcorper neque. Praesent maximus commodo magna, a commodo nunc interdum vitae. Ut id urna pretium, sollicitudin massa eget, congue velit. Nunc felis mauris, vulputate non est eu, euismod tincidunt tortor. Nullam at neque sit
    amet dolor aliquet efficitur. Sed nulla massa, aliquam id lorem vitae, convallis vehicula nibh. Cras vulputate iaculis tortor eu luctus. Nulla vel leo sit amet nunc vehicula commodo. Quisque sollicitudin nibh ac ullamcorper imperdiet. </p>

</div>

<button id="submit">Export to PDF</button>

https://jsfiddle.net/a6fm0j87/1/

相关问题