React Native中react-native-html-to-pdf在iOS端转PDF始终空白求助

数据老陈

2026-7-3

React-Native-HTML-to-PDF iOS端生成空白PDF的解决方案

以下是针对iOS端生成空白PDF问题的常见排查和解决方法：

检查HTML资源路径兼容性
iOS端对本地资源（图片、CSS文件等）的路径处理和Android差异很大，相对路径大概率无法被识别。建议把所有本地资源转为Base64格式嵌入HTML中，或者通过Image.resolveAssetSource获取资源的绝对URI后再使用。比如本地图片可以先转成Base64字符串，再替换HTML里的img标签src属性。
验证HTML内容的完整性与兼容性
该包底层依赖iOS的WebView渲染HTML，部分HTML/CSS特性在Safari（iOS WebView基于Safari内核）中的表现和Android端WebView不同。先把你的htmlContent复制到Safari浏览器中打开，确认能正常渲染。同时确保HTML有完整的结构，比如包含<html>、<body>闭合标签，避免只传入片段内容。
调整输出路径参数
iOS的文件目录权限和Android不同，directory: 'Documents'可能存在权限问题或者路径解析错误。可以尝试去掉directory参数使用默认路径，或者借助react-native-fs获取iOS的Documents绝对路径后传入：
```
import RNFS from 'react-native-fs';

const options = {
  html: htmlContent,
  fileName: `${voucher.clientID} - ${voucher.archiveNo}`,
  directory: RNFS.DocumentDirectoryPath,
};
```
排查包版本与iOS配置
确保使用的react-native-html-to-pdf是最新版本，旧版本可能存在iOS端的已知bug。同时检查iOS项目的Info.plist是否添加了文件访问相关权限，执行pod install确认依赖安装完整。
等待HTML渲染完成再生成PDF
如果HTML内容较复杂，WebView可能还没渲染完成就触发了PDF生成，导致空白。可以尝试在调用convert前添加短暂延迟，或者在HTML中加入脚本，通知RN端渲染完成后再执行PDF生成操作。

示例代码（处理本地图片为Base64）：

import { Image } from 'react-native';
import RNFS from 'react-native-fs';

// 将本地图片转为Base64
const getImageBase64 = async (imageAsset) => {
  const assetInfo = Image.resolveAssetSource(imageAsset);
  const base64Str = await RNFS.readFile(assetInfo.uri, 'base64');
  return `data:image/png;base64,${base64Str}`;
};

// 构建完整可兼容的HTML
const logoBase64 = await getImageBase64(require('./assets/logo.png'));
const htmlContent = `
<html>
  <body style="padding: 16px;">
    <img src="${logoBase64}" width="100" height="100" />
    <h2>客户ID: ${voucher.clientID}</h2>
    <p>档案编号: ${voucher.archiveNo}</p>
    <!-- 其他内容 -->
  </body>
</html>
`;

const options = {
  html: htmlContent,
  fileName: `${voucher.clientID} - ${voucher.archiveNo}`,
};

const pdfFile = await RNHTMLtoPDF.convert(options);

内容的提问来源于stack exchange，提问作者Ruchira Swarnapriya