HummusJS技术问询：如何用JavaScript将HTML代码转换为PDF？

Hey there! Great to hear you've already mastered using HummusJS for JPG-to-PDF conversions and merging multiple PDFs—solid progress!

First off, a quick heads-up: HummusJS doesn’t have a built-in HTML rendering engine, so it can’t directly convert HTML code to PDF on its own. But don’t worry—we can pair it with other tools that handle HTML rendering, then use your existing HummusJS skills to polish the final PDF. Here are two practical approaches:

Approach 1: Convert HTML to Image First, Then Use HummusJS #

Since you already know how to turn JPGs into PDFs with HummusJS, we can first convert the HTML to an image (like JPG or PNG), then feed that image into HummusJS. Tools like Puppeteer or html2canvas work great for rendering HTML to images.

Example Workflow: #

1. Use Puppeteer to take a screenshot of your HTML:

const puppeteer = require('puppeteer');

async function htmlToImage(htmlPath, outputImagePath) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(`file://${htmlPath}`); // Or pass a live URL if needed
  await page.screenshot({ path: outputImagePath, fullPage: true });
  await browser.close();
}

// Run the function
htmlToImage('./your-html-file.html', './output-image.jpg');

2. Then use your existing HummusJS code to convert the image to PDF:

const hummus = require('hummus');

function imageToPDF(imagePath, outputPDFPath) {
  const pdfWriter = hummus.createWriter(outputPDFPath);
  const image = pdfWriter.createImage(imagePath);
  const pageWidth = image.getWidth();
  const pageHeight = image.getHeight();
  
  pdfWriter.createPage(0, 0, pageWidth, pageHeight);
  const pageContent = pdfWriter.startPageContentContext();
  pageContent.drawImage(0, 0, image);
  
  pdfWriter.endPage();
  pdfWriter.end();
}

// Run the function
imageToPDF('./output-image.jpg', './final-output.pdf');

Approach 2: Convert HTML to PDF Fragment, Then Merge with HummusJS #

If you need the HTML content as a proper searchable PDF (not just an image embedded in PDF), use a tool like Puppeteer to generate a PDF from the HTML first, then use HummusJS to merge it with other PDFs (if needed) or adjust it further.

Example Workflow: #

1. Use Puppeteer to generate a PDF from HTML:

const puppeteer = require('puppeteer');

async function htmlToPdf(htmlPath, outputPdfPath) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(`file://${htmlPath}`);
  await page.pdf({ path: outputPdfPath, format: 'A4' });
  await browser.close();
}

// Run the function
htmlToPdf('./your-html-file.html', './html-generated.pdf');

2. Then use your existing HummusJS code to merge this PDF with others (or use it directly if no merging is needed):

const hummus = require('hummus');

function mergePDFs(inputPaths, outputPath) {
  const merger = hummus.createMerger(outputPath);
  
  inputPaths.forEach(path => {
    merger.addPDF(path);
  });
  
  merger.end();
}

// Merge the HTML-generated PDF with other documents
mergePDFs(['./html-generated.pdf', './other-document.pdf'], './merged-final.pdf');

Quick Tips #

• Puppeteer uses Chrome under the hood, so it’s perfect for rendering complex HTML with advanced CSS or JavaScript.
• html2canvas is a lighter alternative if you don’t need full browser-level rendering, but it might struggle with some complex layouts or animations.

内容的提问来源于stack exchange，提问作者Vipul Sharma