如何用JavaScript/jQuery将带CSS样式的HTML简历导出为PDF？

Hey there! I totally get your frustration—building a custom resume with HTML/CSS is fun, but getting it to export as a perfect PDF without breaking styles is way harder than it should be. Let’s walk through reliable JavaScript/jQuery solutions that should handle your .page element smoothly, plus a fallback PHP option if needed.

推荐方案：html2canvas + jsPDF #

This combo works by first rendering your .page element into a canvas (preserving all styles), then converting that canvas into an A4 PDF. It’s the most widely used approach for this exact problem.

步骤1：引入依赖 #

First, make sure you have both libraries included in your project (you can download them locally or use npm—avoiding external CDNs as requested):

• html2canvas (handles DOM to canvas conversion)
• jsPDF (handles PDF creation)

步骤2：编写导出函数 #

Add this JavaScript code to your project. It targets your .page element, scales it for high resolution, and exports it as an A4 PDF:

function exportResumeToPDF() {
  const resumePage = document.querySelector('.page');

  // Wait for fonts to load completely to avoid missing text styles
  document.fonts.ready.then(() => {
    html2canvas(resumePage, {
      scale: 2, // Double resolution to prevent blurriness in PDF
      useCORS: true, // Enable if your profile image is from a cross-origin source
      logging: false, // Disable console logs for cleaner output
      backgroundColor: '#ffffff' // Ensure white background matches your page
    }).then(canvas => {
      // A4 dimensions in millimeters: 210mm (width) × 297mm (height)
      const pdf = new jsPDF('portrait', 'mm', 'a4');
      const imgWidth = 210;
      const imgHeight = (canvas.height * imgWidth) / canvas.width;

      // Add the canvas image to the PDF
      pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, imgWidth, imgHeight);
      
      // Download the PDF
      pdf.save('john-doe-resume.pdf');
    });
  });
}

// Add an export button to your page (optional)
// <button onclick="exportResumeToPDF()">Export Resume as PDF</button>

关键注意事项 #

• Font Loading: Wrapping the export in document.fonts.ready ensures your Open Sans font is fully loaded before rendering—this prevents text from falling back to default fonts.
• Cross-Origin Images: If your profile image is hosted externally, make sure the server allows CORS, or save the image locally to avoid rendering issues.
• Transform Support: html2canvas handles most CSS transforms (like your rotated rectangles) well in recent versions, but if you see glitches, try updating to the latest version of the library.

备选方案：jsPDF html插件 #

If you want a more streamlined approach, use jsPDF’s official html2canvas plugin, which wraps both libraries into a simpler API:

// Import the libraries (adjust paths to your local files)
import jsPDF from 'jspdf';
import 'jspdf-html2canvas';

function exportResume() {
  const doc = new jsPDF('portrait', 'mm', 'a4');
  
  doc.html(document.querySelector('.page'), {
    callback: (doc) => doc.save('resume.pdf'),
    x: 0,
    y: 0,
    width: 210, // Match A4 width in mm
    windowWidth: 1000 // Match your .page element's pixel width for correct scaling
  });
}

Fallback：PHP + wkhtmltopdf #

If JavaScript solutions still don’t work for you, you can use PHP with wkhtmltopdf—a command-line tool that renders HTML to PDF using a headless Chrome instance. Here’s a basic example:

<?php
// Read your HTML resume file
$htmlContent = file_get_contents('resume.html');

// Path to wkhtmltopdf (adjust this to your server's installation path)
$wkhtmltopdfPath = '/usr/bin/wkhtmltopdf';

// Command to generate PDF: set page size to A4, read from stdin, output to resume.pdf
$command = "$wkhtmltopdfPath --page-size A4 - resume.pdf";

// Execute the command
$process = proc_open($command, [
  0 => ["pipe", "r"],
  1 => ["pipe", "w"],
  2 => ["pipe", "w"]
], $pipes);

if (is_resource($process)) {
  // Pass HTML content to wkhtmltopdf
  fwrite($pipes[0], $htmlContent);
  fclose($pipes[0]);
  
  // Close streams and process
  stream_get_contents($pipes[1]);
  fclose($pipes[1]);
  stream_get_contents($pipes[2]);
  fclose($pipes[2]);
  proc_close($process);
  
  // Force download of the generated PDF
  header('Content-Type: application/pdf');
  header('Content-Disposition: attachment; filename="resume.pdf"');
  readfile('resume.pdf');
}
?>

Note: This requires wkhtmltopdf to be installed on your server, which adds extra setup work—so only use this if JavaScript options fail.

Final Tips #

• Test the export with your exact resume layout—pay attention to rotated elements and font styling.
• If you see minor alignment issues, tweak the scale value in html2canvas or adjust the PDF dimensions slightly to match your .page element’s aspect ratio.

内容的提问来源于stack exchange，提问作者Carle B. Navy