大HTML文件转PDF的最快方法？HTML/CSS/JS场景下求jspdf替代方案

1. html2canvas + jsPDF 组合 #

单独jspdf对复杂CSS支持拉胯，但结合html2canvas先把目标DOM转成canvas再导出PDF，能完美保留页面样式，适合前端纯浏览器环境。

代码示例：

// 先引入html2canvas和jsPDF库
async function generatePDF() {
  const targetElement = document.getElementById('pdf-content'); // 要转换的DOM容器
  const canvas = await html2canvas(targetElement, {
    scale: 2, // 提高分辨率避免模糊
    useCORS: true // 处理跨域图片加载
  });
  
  const imgData = canvas.toDataURL('image/png');
  const pdf = new jsPDF('p', 'mm', 'a4');
  
  const imgWidth = 210; // A4宽度（毫米）
  const pageHeight = 297; // A4高度（毫米）
  const imgHeight = (canvas.height * imgWidth) / canvas.width;
  let remainingHeight = imgHeight;
  let yPosition = 0;

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

  // 长内容自动分页
  while (remainingHeight >= 0) {
    yPosition = remainingHeight - imgHeight;
    pdf.addPage();
    pdf.addImage(imgData, 'PNG', 0, yPosition, imgWidth, imgHeight);
    remainingHeight -= pageHeight;
  }
  
  pdf.save('result.pdf');
}

// 绑定按钮点击事件
document.getElementById('generate-btn').addEventListener('click', generatePDF);

注意：如果页面包含跨域图片，需配置服务器允许CORS，或把图片转成base64嵌入页面。

2. Puppeteer（无头Chrome） #

适合需要高精度PDF的场景，能完整渲染所有CSS特性（flex、grid、动画终态都没问题），支持分页、页眉页脚等高级配置。前端需通过Node.js后端调用，或在Electron环境直接运行。

示例代码（Node.js环境）：

const puppeteer = require('puppeteer');

async function generatePDF() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  // 加载前端生成的HTML内容，也可以传入远程URL
  await page.setContent(document.getElementById('pdf-content').innerHTML);
  
  // 生成PDF
  await page.pdf({
    path: 'result.pdf',
    format: 'A4',
    printBackground: true, // 保留背景色和图片
    margin: { top: '20mm', right: '20mm', bottom: '20mm', left: '20mm' }
  });
  
  await browser.close();
}

优势：CSS支持最完善，能处理动态内容；缺点：依赖Node.js环境，纯前端用需要搭后端接口。

3. wkhtmltopdf #

开源命令行工具，基于WebKit引擎，可将HTML文件或URL转为PDF。前端把HTML内容传给后端，后端执行命令生成后返回给前端下载。

使用步骤：

1. 把wkhtmltopdf安装到服务器或本地环境
2. 后端执行生成命令：

wkhtmltopdf --enable-javascript --print-media-type input.html output.pdf

3. 将生成的PDF文件返回给前端供下载

注意：确保服务器环境支持该命令，HTML内的资源路径要用绝对路径或正确的相对路径。

4. Print.js #

轻量库，利用浏览器原生打印功能生成PDF，支持自定义打印样式，无需重型依赖。

代码示例：

<!-- 引入Print.js -->
<script src="print.js"></script>

<!-- 待转换内容 -->
<div id="print-section">
  <!-- 你的HTML+CSS内容 -->
</div>

<!-- 触发按钮 -->
<button onclick="createPDF()">生成PDF</button>

<script>
function createPDF() {
  printJS({
    printable: 'print-section', // 目标DOM元素ID
    type: 'html',
    css: './styles/custom-print.css', // 指定打印专用样式
    scanStyles: false, // 禁用自动扫描页面样式，只使用指定CSS
    documentTitle: 'My PDF'
  });
}
</script>

优势：轻量易集成；缺点：分页控制相对有限，依赖浏览器打印设置。

内容的提问来源于stack exchange，提问作者qaym sindion