如何用JavaScript转HTML设计为PDF？转换表格显示HTML代码问题咨询

Hey, let's troubleshoot why your styled table is turning into raw HTML code when you convert it to PDF with jsPDF 1.3.3. The core problem is that this older version of jsPDF doesn't have built-in support for rendering complex HTML (like tables with custom styles). When you feed it HTML directly, it just outputs the text as-is instead of parsing and rendering the elements. Here are two reliable solutions:

Solution 1: Use html2canvas with jsPDF (Best for Older jsPDF Versions) #

html2canvas converts your HTML element into a canvas image, which jsPDF can then add to the PDF. This preserves all your table's styling exactly as it appears in the browser.

Step-by-Step Implementation #

1. First, add the html2canvas library to your project (make sure it's loaded after jsPDF).
2. Use this code to handle the conversion:

// Grab the container with your table
const contentElement = document.getElementById('content');

// Convert the HTML element to a canvas
html2canvas(contentElement).then(canvas => {
  // Initialize a new jsPDF instance (A4 portrait)
  const pdf = new jsPDF('p', 'mm', 'a4');
  
  // Calculate image dimensions to fit 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 yPosition = 0;

  // Add the canvas image to the first page
  pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, yPosition, imgWidth, imgHeight);
  
  // Handle multi-page content if your table is longer than one page
  remainingHeight -= pageHeight;
  while (remainingHeight >= 0) {
    yPosition = remainingHeight - imgHeight;
    pdf.addPage();
    pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, yPosition, imgWidth, imgHeight);
    remainingHeight -= pageHeight;
  }
  
  // Save the final PDF
  pdf.save('your-table.pdf');
});

Solution 2: Upgrade jsPDF and Use Its Built-in html() Method #

If you can upgrade to a newer version of jsPDF (v2.x or later), it has a built-in html() method that handles HTML rendering directly (it still uses html2canvas under the hood, but the setup is simpler).

Example Code #

// Initialize the jsPDF instance (using the newer syntax)
const doc = new jsPDF();

// Render the HTML element directly into the PDF
doc.html(document.getElementById('content'), {
  callback: function(pdfDoc) {
    pdfDoc.save('styled-table.pdf');
  },
  // Optional: Adjust positioning on the page
  x: 10,
  y: 10
});

Key Notes to Avoid Issues #

• Style Visibility: Make sure your table's styles are either inline or accessible to html2canvas (some external stylesheets might not be captured properly—test with inline styles if you run into issues).
• Avoid Deprecated Methods: Don't use jsPDF's old fromHTML() method—it's outdated and doesn't handle complex HTML like styled tables well, which is likely why you saw raw HTML code in the first place.
• Large Tables: If your table spans multiple pages, both solutions above handle pagination, but you might need to tweak the height calculations for perfect alignment.

内容的提问来源于stack exchange，提问作者s-dept