如何用html-pdf-chrome将HTML快速转换为高质量PDF和图片？完整指南

如何用html-pdf-chrome将HTML快速转换为高质量PDF和图片？完整指南

【免费下载链接】html-pdf-chrome HTML to PDF or image (jpeg, png, webp) converter via Chrome/Chromium 项目地址: https://gitcode.com/gh_mirrors/ht/html-pdf-chrome

html-pdf-chrome是一个通过Chrome/Chromium将HTML转换为PDF或图片（jpeg、png、webp）的工具，支持Windows、macOS和Linux系统，适用于需要高效处理网页内容格式转换的开发者和用户。

🚀 快速入门：安装与基础配置

🌟 准备工作

使用html-pdf-chrome前需确保环境满足以下条件：

• 安装最新版Chrome/Chromium浏览器
• 运行在Windows、macOS或Linux系统上
• 安装当前支持的Node.js版本

📦 一键安装步骤

通过npm命令即可快速安装：

npm install --save html-pdf-chrome

💻 核心功能：从HTML到PDF/图片的完美转换

📄 HTML转PDF基础用法

转换HTML为PDF的核心代码示例：

const htmlPdf = require('html-pdf-chrome');

const html = '<p>Hello, world!</p>';
const options = {
  port: 9222, // Chrome监听端口
};

// 保存为PDF文件
htmlPdf.create(html, options).then((pdf) => pdf.toFile('test.pdf'));
// 转换为Base64编码
htmlPdf.create(html, options).then((pdf) => pdf.toBase64());
// 生成Buffer
htmlPdf.create(html, options).then((pdf) => pdf.toBuffer());

📸 高质量截图功能

通过配置screenshotOptions可将HTML转换为图片格式（png、jpeg或webp）：

const options = {
  port: 9222,
  screenshotOptions: {
    format: 'png', // 可选格式：png、jpeg、webp
    clip: { // 可选裁剪区域
      x: 0,
      y: 0,
      width: 1000,
      height: 800,
      scale: 1
    }
  }
};
htmlPdf.create(html, options).then((pdf) => pdf.toFile('screenshot.png'));

使用html-pdf-chrome生成的高质量网页截图示例

⚙️ 高级配置：定制你的转换体验

⏱️ 渲染完成触发器

html-pdf-chrome提供多种触发器确保内容完全渲染后再转换，位于src/CompletionTriggers/目录下，支持以下类型：

• Timer：等待指定时间（毫秒）
• Element：等待DOM元素加载完成
• Event：监听特定事件触发
• Variable：等待变量设置为true

示例：设置5秒延迟确保动态内容加载完成

const options = {
  port: 9222,
  completionTrigger: new htmlPdf.CompletionTrigger.Timer(5000)
};

🖋️ 自定义页眉页脚（Chrome 65+支持）

通过printOptions配置自定义页眉页脚，支持动态注入页码、日期等信息：

const options = {
  port: 9222,
  printOptions: {
    displayHeaderFooter: true,
    headerTemplate: `
      <div class="text center">
        Page <span class="pageNumber"></span> of <span class="totalPages"></span>
      </div>
    `,
    footerTemplate: '<div class="text center">文档生成于 <span class="date"></span></div>'
  }
};

📝 实用案例：满足多样化需求

🌐 转换外部网站内容

直接转换在线网页为PDF：

const options = { port: 9222 };
const url = 'https://example.com';
htmlPdf.create(url, options).then((pdf) => pdf.toFile('website.pdf'));

📄 Markdown转PDF工作流

结合marked库实现Markdown到PDF的转换：

const marked = require('marked');
const html = marked('# Hello [World](https://www.google.com/)!');
htmlPdf.create(html, { port: 9222 }).then((pdf) => pdf.toFile('markdown.pdf'));

📊 模板引擎集成（以Pug为例）

使用Pug模板引擎生成动态HTML内容并转换：

const pug = require('pug');
const template = pug.compile('p Hello, #{name}!');
const html = template({ name: 'html-pdf-chrome' });
htmlPdf.create(html, { port: 9222 }).then((pdf) => pdf.toFile('template.pdf'));

⚠️ 安全与性能优化建议

🔒 安全最佳实践

• 禁止处理不受信任的用户输入，可能导致服务器端请求伪造(SSRF)等安全风险
• 如需解决CORS问题，可添加--disable-web-securityChrome标志（仅用于完全信任的内容）

🚀 性能优化技巧

• 保持Chrome后台运行：使用pm2工具管理Chrome进程，避免重复启动开销

  # 安装pm2
  npm install -g pm2
  # 启动Chrome并指定端口
  pm2 start google-chrome \
    --interpreter none \
    -- \
    --headless \
    --disable-gpu \
    --remote-debugging-port=9222
  

• 合理设置完成触发器，避免不必要的等待时间

�生態系統：相關工具與資源

html-pdf-chrome可與以下工具結合使用，構建完整的文檔處理流程：

• PDF.js：在網頁中渲染PDF文件的開源庫
• Puppeteer：控制無頭Chrome的高級API，可用於自動化測試和PDF生成
• wkhtmltopdf：使用WebKit引擎的HTML轉PDF命令行工具

这些工具与html-pdf-chrome相辅相成，为用户提供更全面的PDF处理解决方案。

【免费下载链接】html-pdf-chrome HTML to PDF or image (jpeg, png, webp) converter via Chrome/Chromium 项目地址: https://gitcode.com/gh_mirrors/ht/html-pdf-chrome