使用jsPDF导出PDF遇报错及from_html.js问题的技术咨询

Hey there, let’s work through this frustrating error you’re hitting when exporting to PDF with jsPDF. I’ve dealt with similar quirks between jsPDF and the older from_html.js script before, so here’s a breakdown of what’s going wrong and how to fix it:

Core Causes #

First, let’s unpack why this error pops up:

• API Changes in jsPDF: Newer versions of jsPDF replaced getter methods like getHeight() with direct property access (e.g., .height). If your from_html.js is outdated, it’s still trying to call the old method that no longer exists.
• Version Mismatch: from_html.js is a legacy script that’s no longer actively maintained. If you’re using a modern jsPDF release alongside an old from_html.js, they won’t play nice together.
• Incorrect PDF Initialization: If you didn’t define a page size when creating your jsPDF instance, internal.pageSize might not be properly initialized, leading to missing methods/properties.

Step-by-Step Fixes #

1. Update the getHeight() Call (Quick Fix) #

If you want to stick with your current setup, modify the line throwing the error in from_html.js (or your own code) from:

this.pdf.internal.pageSize.getHeight()

to:

this.pdf.internal.pageSize.height

Modern jsPDF exposes page dimensions as direct properties instead of using getter functions, so this should resolve the type error immediately.

2. Align jsPDF and from_html.js Versions #

If changing the code isn’t an option, make sure you’re using matching versions of both libraries. Grab the from_html.js file from the same jsPDF release as your core library—this ensures API compatibility between the two scripts.

3. Switch to html2canvas (Recommended Long-Term Fix) #

from_html.js is pretty outdated, and the official jsPDF team now recommends using html2canvas to render HTML content into PDFs. It’s more reliable, actively maintained, and handles modern CSS better. Here’s a quick example of how to use it:

// Get the element you want to export
const exportElement = document.getElementById("your-target-element");

// Use html2canvas to capture the element as a canvas
html2canvas(exportElement).then(canvas => {
  const pdf = new jsPDF("p", "mm", "a4");
  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 first page
  pdf.addImage(canvas.toDataURL("image/png"), "PNG", 0, yPosition, imgWidth, imgHeight);
  remainingHeight -= pageHeight;

  // Add additional pages if content is too long
  while (remainingHeight >= 0) {
    yPosition = remainingHeight - imgHeight;
    pdf.addPage();
    pdf.addImage(canvas.toDataURL("image/png"), "PNG", 0, yPosition, imgWidth, imgHeight);
    remainingHeight -= pageHeight;
  }

  // Save the PDF
  pdf.save("exported-content.pdf");
});

This approach avoids the legacy from_html.js entirely and leverages a more robust tool for HTML-to-canvas conversion.

4. Verify PDF Instance Initialization #

Double-check how you’re creating your jsPDF instance. Always specify a page size to ensure pageSize is properly set:

// Correct initialization with page size
const pdf = new jsPDF("p", "mm", "a4"); // Portrait, mm units, A4 size

// Avoid vague initialization that might cause issues
// const pdf = new jsPDF(); // Not recommended if using from_html.js

Final Checks #

• Make sure jsPDF loads before from_html.js in your script order—loading dependencies out of order can cause unexpected errors.
• Check your browser’s dev tools for other related errors; sometimes the getHeight() error is a symptom of a larger issue with script loading.

内容的提问来源于stack exchange，提问作者Aleks Porberevskiy