如何在React Native（Expo Android）中设置PDF输出为A4尺寸

核心思路 #

通过CSS的@page规则定义PDF页面为A4规格，同时结合目标DPI计算对应像素尺寸，在printToFileAsync中配置渲染参数，实现标准A4尺寸+高DPI的PDF输出。

步骤与代码实现 #

1. 计算目标DPI对应的A4像素尺寸
   A4物理尺寸为210mm×297mm，根据目标DPI换算像素：

• 72PPI（默认）：595px × 842px
• 150PPI：1240px × 1754px
• 300PPI（常用高分辨率）：2480px × 3508px

2. 编写带页面规格的HTML模板
   在HTML样式中通过@page标记A4尺寸，同时设置html/body的像素尺寸匹配目标DPI：

<!DOCTYPE html>
<html>
<head>
  <style>
    @page {
      size: A4; /* 标记PDF页面为A4规格 */
      margin: 10mm; /* 可选：设置页面边距 */
    }
    html, body {
      width: 2480px; /* 300PPI对应的A4宽度 */
      height: 3508px; /* 300PPI对应的A4高度 */
      margin: 0;
      padding: 0;
      font-size: 18px; /* 高DPI下需适当放大字体，避免过小 */
    }
    /* 自定义账单内容样式 */
    .bill-content {
      padding: 20px;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <div class="bill-content">
    <h2>账单明细</h2>
    <p>账单编号：BN20240520001</p>
    <p>金额：¥123.45</p>
    <!-- 更多账单内容 -->
  </div>
</body>
</html>

3. 调用Expo Print生成PDF
   在printToFileAsync中传入HTML模板，并配置与目标DPI匹配的width/height参数：

import * as Print from 'expo-print';
import { shareAsync } from 'expo-sharing';

async function generateA4HighDpiPDF() {
  const htmlTemplate = `
    <!-- 上面的HTML模板内容 -->
  `;

  const printOptions = {
    width: 2480,
    height: 3508,
    fileName: 'a4-bill.pdf',
    backgroundColor: '#ffffff',
  };

  try {
    const result = await Print.printToFileAsync({
      html: htmlTemplate,
      ...printOptions,
    });
    console.log('PDF已生成：', result.uri);
    await shareAsync(result.uri); // 可选：分享生成的PDF
  } catch (error) {
    console.error('PDF生成失败：', error);
  }
}

注意事项 #

• 若调整DPI，需同步修改HTML中html/body的尺寸和printOptions里的width/height值。
• @page的size:A4会确保PDF的文档元数据标记为标准A4，避免打开时页面尺寸异常。
• 高DPI下需调整字体大小、元素间距，保证内容可读性，避免因像素密度过高导致内容过小。

内容的提问来源于stack exchange，提问作者kashif Nawaz