当前位置：首页 > 前端开发 > 正文

如何快速将HTML转为PDF？

admin
前端开发
2025-06-28
2857

HTML转为PDF可通过多种方法实现：使用浏览器打印功能选择另存为PDF；调用第三方库如jsPDF或Puppeteer进行编程转换；利用在线转换工具上传HTML文件生成PDF；或通过后端服务如wkhtmltopdf处理。

将HTML转为PDF文件格式是常见的需求,尤其在生成报告、保存网页内容或创建可打印文档时，以下是6种主流方法，涵盖不同场景的操作步骤、工具推荐及注意事项：

浏览器自带打印功能（无需工具）

适用场景：快速保存网页为PDF
操作步骤：

打开目标网页（如 https://example.com）
按 Ctrl+P（Windows）或 Cmd+P（Mac）打开打印界面
目标打印机 → 选择 “另存为PDF”
调整布局/页边距 → 点击 “保存”

优点：
完全免费，无需安装
保留基础样式和文本

缺点：如JavaScript渲染）可能丢失
复杂CSS样式可能错位

使用在线转换工具（推荐3款）

适用场景：无需编程，即时转换

如何快速将HTML转为PDF？第1张

工具推荐及操作：

Smallpdf（smallpdf.com）
拖拽HTML文件或输入URL → 自动转换 → 下载PDF
Sejda（sejda.com）
支持上传HTML文件或URL → 自定义页面尺寸 → 转换下载
PDFShift（pdfshift.io）
- 直接通过API调用：https://api.pdfshift.io/v3/convert/pdf?source=https://example.com

注意事项：
️ 敏感数据勿传第三方工具
️ 免费工具有页数/频率限制

编程实现（开发者适用）

Node.js + Puppeteer（谷歌官方库）

const puppeteer = require('puppeteer');
async function htmlToPdf(url, outputPath) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url, { waitUntil: 'networkidle2' }); // 等待页面加载
  await page.pdf({ 
    path: outputPath, 
    format: 'A4',
    printBackground: true // 包含背景图
  });
  await browser.close();
}
// 示例：转换网页
htmlToPdf('https://example.com', 'output.pdf');

Python + pdfkit（依赖wkhtmltopdf）

import pdfkit
# 转换URL
pdfkit.from_url('https://example.com', 'output.pdf')
# 转换本地HTML文件
pdfkit.from_file('input.html', 'output.pdf')

优势：
自动化批量处理
精准控制分页/页眉页脚

桌面软件（离线操作）

推荐工具：

Adobe Acrobat Pro：
打开软件 → 工具 → 创建PDF → 选择网页文件/URL

Wkhtmltopdf（开源命令行工具）：

wkhtmltopdf https://example.com output.pdf

Word间接转换（兼容复杂内容）

用浏览器打开HTML文件 → 全选复制内容
粘贴到Microsoft Word中
文件 → 另存为 → 选择PDF格式

CSS优化技巧（提升PDF质量）

转换前在HTML中添加打印样式,避免内容截断：

<style>
  @media print {
    /* 强制分页 */
    .page-break { page-break-after: always; }
    /* 隐藏不必要元素 */
    .ad-banner { display: none; }
    /* 确保图片不溢出 */
    img { max-width: 100% !important; }
  }
</style>

常见问题解决

问题	解决方案
中文乱码	HTML中声明`<meta charset="UTF-8">`
图片不显示	使用绝对路径或Base64编码图片
页眉页脚缺失	用Puppeteer设置模板（官方文档）