如何将React Native组件打印/保存为PDF？求可行技术方案

阿华AIGC实验室

2026-5-7

嘿，我来帮你梳理下在React Native里处理页面打印/转PDF的可行方案，两种思路都给你拆解清楚：

直接在React Native中生成PDF或打印的依赖

这类库直接对接原生平台的打印/PDF生成能力，不用绕HTML，上手很快：

react-native-print：这是社区最常用的工具，支持打印React Native视图、HTML字符串，也能直接生成PDF文件保存到设备，iOS和Android都做了适配。
基本用法示例：

import RNPrint from 'react-native-print';

const handlePrintOrGeneratePdf = async () => {
  try {
    // 可以直接传入HTML内容，或是后续提到的RN组件转来的HTML
    const result = await RNPrint.print({
      html: '<div style="padding: 20px;"><h1>我的文档标题</h1><p>这是文档内容</p></div>',
      fileName: 'my-document',
      orientation: 'portrait', // 可选：landscape 横向
    });
    console.log('操作成功:', result);
  } catch (error) {
    console.error('出错啦:', error);
  }
};

它还支持从本地文件URL打印，灵活性拉满。

react-native-html-to-pdf：如果你的核心需求是把HTML转成PDF，这个库更专注，原生端处理HTML渲染和PDF生成，兼容性稳定。
用法示例：

import RNHTMLtoPDF from 'react-native-html-to-pdf';

const generatePdfFromHtml = async () => {
  const options = {
    html: '<p>通过HTML转换的PDF内容</p>',
    fileName: 'my-custom-pdf',
    directory: 'Documents', // 指定保存目录
  };

  const pdfFile = await RNHTMLtoPDF.convert(options);
  console.log('PDF保存路径:', pdfFile.filePath);
};

React Native组件转HTML的适配方案

你提到找不到合适的RN组件转HTML的库，这里有两个靠谱的选择：

react-native-render-html：这个库原本是用来把HTML渲染成RN组件的，但它也提供了htmlFromElement方法，能把基础RN组件（View、Text、Image等）转换成HTML。不过要注意，复杂自定义组件（比如带动画、手势的）可能会有样式丢失，适合处理静态页面。
用法示例：

import { htmlFromElement } from 'react-native-render-html';
import { View, Text, Image } from 'react-native';

const MyRnComponent = () => (
  <View style={{ padding: 15, backgroundColor: '#f5f5f5' }}>
    <Text style={{ fontSize: 20, fontWeight: '600' }}>测试转换</Text>
    <Image source={{ uri: 'https://example.com/image.jpg' }} style={{ width: 100, height: 100 }} />
  </View>
);

// 把RN组件转成HTML字符串
const convertedHtml = htmlFromElement(<MyRnComponent />);