使用html2pdf库生成PDF出现空白页的原因及替代方案咨询

问题排查与修复 #

你的代码生成空白PDF的核心原因是直接将纯文本字符串传给html2pdf().from()方法，该方法更适配DOM元素或标准HTML字符串，纯文本无法被正确渲染。同时手动处理Blob的步骤可以用库自带的save()方法简化，减少出错概率。

修正后的代码示例 #

<!DOCTYPE html>
<html>
<head>
  <title>Download PDF</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.1/html2pdf.bundle.min.js"></script>
</head>
<body>
  <button id="downloadPdfButton">Download PDF</button>
  <!-- 待生成PDF的内容容器 -->
  <div id="pdfContent" style="display: none;">Hello World</div>

  <script>
    function generatePDF() {
      // 传入DOM元素作为PDF内容源
      const content = document.getElementById('pdfContent');

      const pdfOptions = {
        margin: 10,
        filename: 'downloaded.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
      };

      // 使用库自带的save方法完成下载，无需手动处理Blob
      html2pdf().from(content).set(pdfOptions).save();
    }

    document.getElementById('downloadPdfButton').addEventListener('click', generatePDF);
  </script>
</body>
</html>

如果不想额外添加DOM元素，也可以将纯文本包装成HTML字符串传入：

const content = '<div style="padding: 20px;">Hello World</div>';
html2pdf().from(content).set(pdfOptions).save();

其他HTML转PDF方案 #

1. jsPDF + html2canvas 手动组合 #

直接使用底层两个库，灵活性更高，适合自定义渲染逻辑：

function generatePDF() {
  const content = document.getElementById('pdfContent');
  html2canvas(content, { scale: 2 }).then(canvas => {
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF('p', 'mm', 'a4');
    const pageWidth = pdf.internal.pageSize.getWidth();
    const pageHeight = pdf.internal.pageSize.getHeight();
    const imgWidth = canvas.width;
    const imgHeight = canvas.height;
    const ratio = Math.min(pageWidth/imgWidth, pageHeight/imgHeight);
    const x = (pageWidth - imgWidth*ratio)/2;
    const y = (pageHeight - imgHeight*ratio)/2;
    pdf.addImage(imgData, 'PNG', x, y, imgWidth*ratio, imgHeight*ratio);
    pdf.save('downloaded.pdf');
  });
}

需单独引入jsPDF和html2canvas库。

2. Puppeteer（Node.js服务端） #

适合服务端生成PDF，可完整渲染包含JS动态内容的页面：

const puppeteer = require('puppeteer');

async function generatePDF() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setContent('<div>Hello World</div>');
  await page.pdf({ path: 'downloaded.pdf', format: 'a4' });
  await browser.close();
}

3. wkhtmltopdf（命令行工具） #

基于WebKit的命令行工具，适合批量生成PDF，支持通过参数配置样式与格式：

wkhtmltopdf input.html output.pdf

4. pdfmake #

通过定义文档结构生成PDF，适合结构化内容（如表格、列表），无需依赖HTML渲染：

const pdfMake = require('pdfmake/build/pdfmake');
const pdfFonts = require('pdfmake/build/vfs_fonts');
pdfMake.vfs = pdfFonts.pdfMake.vfs;

const docDefinition = {
  content: [
    'Hello World',
    { text: '结构化内容示例', fontSize: 16 }
  ]
};

pdfMake.createPdf(docDefinition).download('downloaded.pdf');

内容的提问来源于stack exchange，提问作者iDibya.com