使用jsPDF时大内容无法分页显示的技术求助

Hey there, let's tackle this jsPDF pagination problem you're stuck on—sounds like you've put in a week of troubleshooting, so let's break down some reliable fixes that should get your content paginating correctly without stretching or styling issues.

First off, the addHTML method you're using is actually deprecated in newer versions of jsPDF. The official replacement is the html() method, which has better support for pagination, CSS (including Bootstrap), and avoids the one-line rendering or blurry stretching you've run into.

Solution 1: Use jsPDF's Official html() Method (Recommended) #

This method is designed to handle automatic pagination and respect your page styles. Here's how to refactor your code:

function gen() {
  // Initialize jsPDF with A4 portrait orientation
  const doc = new jsPDF('p', 'pt', 'a4');
  const contentElement = document.getElementById('booking_review');

  doc.html(contentElement, {
    callback: function(generatedDoc) {
      // Save the final PDF once rendering is complete
      generatedDoc.save('booking-review.pdf');
    },
    // Set margins (adjust as needed)
    x: 15,
    y: 15,
    // Match content width to A4 minus margins for proper layout
    width: 595.28 - 30, // A4's default width in points minus 15pt left/right margins
    // Match your content container's width to ensure Bootstrap styles render correctly
    windowWidth: 800,
    // Enable automatic text-based pagination (prevents content stretching)
    autoPaging: 'text'
  });
}

Why this works: #

• Automatic Pagination: The autoPaging: 'text' setting tells jsPDF to split content at natural text breaks (like line ends or paragraph gaps) instead of arbitrarily cutting or stretching content.
• Bootstrap Support: The html() method pulls in your page's existing CSS (including Bootstrap) as long as the styles are loaded in your document. If you still see styling issues, you can explicitly inject critical styles using the css option:

  doc.html(contentElement, {
    // ... other options
    css: `
      .container { width: 100%; max-width: none; }
      .row { display: flex; flex-wrap: wrap; }
      /* Add any other Bootstrap classes you need to enforce */
    `
  });
  

Solution 2: Manual Pagination (For Edge Cases) #

If automatic pagination still doesn't behave as expected, you can calculate content height manually and split pages yourself. This gives you full control over where breaks happen:

function gen() {
  const doc = new jsPDF('p', 'pt', 'a4');
  const contentElement = document.getElementById('booking_review');
  const pageHeight = doc.internal.pageSize.height;
  const margin = 30;
  const usablePageHeight = pageHeight - (margin * 2); // Height available for content

  // Calculate total content height by cloning the element (hidden from view)
  const contentClone = contentElement.cloneNode(true);
  contentClone.style.position = 'absolute';
  contentClone.style.visibility = 'hidden';
  contentClone.style.width = `${595.28 - 30}px`; // Match PDF content width
  document.body.appendChild(contentClone);
  const totalContentHeight = contentClone.offsetHeight;
  document.body.removeChild(contentClone);

  // Calculate how many pages we need
  const totalPages = Math.ceil(totalContentHeight / usablePageHeight);

  // Render each page
  for (let pageNum = 0; pageNum < totalPages; pageNum++) {
    if (pageNum > 0) doc.addPage(); // Add new page after the first

    doc.html(contentElement, {
      callback: function() {
        // Save only after the last page finishes rendering
        if (pageNum === totalPages - 1) doc.save('booking-review.pdf');
      },
      x: margin,
      // Adjust vertical position to show the correct section of content
      y: margin - (pageNum * usablePageHeight),
      width: doc.internal.pageSize.width - (margin * 2),
      windowWidth: 800,
      // Clip content to only show the current page's section
      clip: [0, pageNum * usablePageHeight, doc.internal.pageSize.width, usablePageHeight]
    });
  }
}

Key Notes: #

• Make sure you're using the latest version of jsPDF (v2.x or newer) since older versions have limited support for the html() method.
• Avoid using fromHTML entirely—it's been deprecated for years and lacks the modern features you need.

Give these methods a try—most users find the html() method with autoPaging solves their pagination and styling issues right away.

内容的提问来源于stack exchange，提问作者V.p. Dixit