如何用JavaScript将含内联CSS的HTML转PDF？现有代码导出空白求助

Hey there! Let’s break down how to fix that blank PDF issue and make sure your export button doesn’t show up in the final file. Blank exports with jsPDF almost always boil down to how you’re converting HTML to PDF, especially when inline styles are involved. Here’s a step-by-step solution:

1. Why You’re Getting a Blank PDF #

jsPDF alone can’t parse complex HTML and its styles out of the box. You need to pair it with html2canvas (which converts HTML to a canvas element) to capture your content properly, including inline <style> rules.

2. Step-by-Step Solution #

First, make sure you have both jsPDF and html2canvas loaded in your project (download them locally and include the scripts—no external links needed).

Option 1: Temporarily Hide the Export Button #

This is the simplest approach—hide the button right before exporting, then show it again once done:

// Get your elements
const exportBtn = document.getElementById('export-btn');
const contentContainer = document.getElementById('content-to-export');

async function exportToPDF() {
  // Hide the button temporarily
  exportBtn.style.display = 'none';

  try {
    // Initialize jsPDF
    const doc = new jsPDF('portrait', 'mm', 'a4');

    // Convert HTML to canvas (with high resolution to avoid blurriness)
    const canvas = await html2canvas(contentContainer, {
      scale: 2,
      logging: false,
      useCORS: true // Only needed if you have cross-domain images
    });

    // Convert canvas to image data
    const imgData = canvas.toDataURL('image/png');

    // Calculate dimensions for A4 page
    const imgWidth = 210; // A4 width in mm
    const pageHeight = 297; // A4 height in mm
    const imgHeight = (canvas.height * imgWidth) / canvas.width;
    let remainingHeight = imgHeight;
    let currentPosition = 0;

    // Add first page
    doc.addImage(imgData, 'PNG', 0, currentPosition, imgWidth, imgHeight);
    remainingHeight -= pageHeight;

    // Add additional pages if content is too long
    while (remainingHeight >= 0) {
      currentPosition = remainingHeight - imgHeight;
      doc.addPage();
      doc.addImage(imgData, 'PNG', 0, currentPosition, imgWidth, imgHeight);
      remainingHeight -= pageHeight;
    }

    // Save the PDF
    doc.save('my-document.pdf');
  } catch (err) {
    console.error('Export failed:', err);
  } finally {
    // Bring the button back
    exportBtn.style.display = 'block';
  }
}

// Bind the function to your button click
exportBtn.addEventListener('click', exportToPDF);

Option 2: Clone the DOM (No Impact on Original Page) #

If you don’t want to modify the original page’s state, clone your content, remove the button from the clone, then export that:

async function exportToPDF() {
  const exportBtn = document.getElementById('export-btn');
  const originalContent = document.getElementById('content-to-export');

  // Clone the content container (deep clone to include all children/styles)
  const clonedContent = originalContent.cloneNode(true);

  // Remove the export button from the cloned content
  const clonedBtn = clonedContent.querySelector('#export-btn');
  if (clonedBtn) clonedBtn.remove();

  // Temporarily add the clone to the page (html2canvas needs it in the DOM)
  document.body.appendChild(clonedContent);
  clonedContent.style.position = 'absolute';
  clonedContent.style.top = '-9999px'; // Hide it off-screen

  try {
    const doc = new jsPDF('portrait', 'mm', 'a4');
    const canvas = await html2canvas(clonedContent, { scale: 2 });
    const imgData = canvas.toDataURL('image/png');

    // Same dimension calculations as Option 1
    const imgWidth = 210;
    const pageHeight = 297;
    const imgHeight = (canvas.height * imgWidth) / canvas.width;
    let remainingHeight = imgHeight;
    let currentPosition = 0;

    doc.addImage(imgData, 'PNG', 0, currentPosition, imgWidth, imgHeight);
    remainingHeight -= pageHeight;

    while (remainingHeight >= 0) {
      currentPosition = remainingHeight - imgHeight;
      doc.addPage();
      doc.addImage(imgData, 'PNG', 0, currentPosition, imgWidth, imgHeight);
      remainingHeight -= pageHeight;
    }

    doc.save('my-document.pdf');
  } catch (err) {
    console.error('Export failed:', err);
  } finally {
    // Clean up the cloned element
    document.body.removeChild(clonedContent);
  }
}

exportBtn.addEventListener('click', exportToPDF);

3. Making Sure Inline Styles Work #

If your inline <style> tags aren’t being captured:

• If the <style> is inside your content container, the clone/hide method will automatically include it.
• If the <style> is in the <head>, copy it into the cloned content before converting:

  // Add this right after cloning the content
  const headStyles = document.querySelectorAll('head style');
  headStyles.forEach(style => clonedContent.appendChild(style.cloneNode(true)));
  

• For stubborn styles, try applying them directly to elements using the style attribute instead of a <style> tag.

Common Pitfalls to Avoid #

• Hidden Content: Ensure your content container (or any parent) isn’t set to display: none or visibility: hidden—html2canvas can’t capture hidden elements.
• Image Loading: If your content has images, wait for them to load before exporting. You can add a check for image load status or use html2canvas’s onclone callback to ensure assets are ready.
• Resolution: Setting scale: 2 in html2canvas ensures your PDF isn’t blurry—adjust higher if needed.

内容的提问来源于stack exchange，提问作者Divyanshu Bhaskar