如何使用 `react-native-html-to-pdf` 开源库

如何使用 react-native-html-to-pdf 开源库

react-native-html-to-pdfConvert html strings to PDF documents using React Native项目地址:https://gitcode.com/gh_mirrors/re/react-native-html-to-pdf

本指南将详细介绍如何利用 react-native-html-to-pdf 这一强大工具来在React Native项目中生成PDF文件。我们将涵盖从项目的基本结构，到关键文件的介绍，以及如何配置和运行这个库。

1. 项目的目录结构及介绍

假设您通过以下命令创建了一个新的React Native项目，且采用了TypeScript模板：

npx react-native init MyRNPDFProject --template react-native-template-typescript

核心目录与文件简介：

• src: 通常存放源代码，包括组件、逻辑处理等。
• App.tsx: 应用程序的主要入口点。在这里，您将实现UI以及调用react-native-html-to-pdf进行PDF生成的逻辑。
• node_modules/react-native-html-to-pdf: 安装的库所在位置，包含了库的所有源码和资源。

当引入react-native-html-to-pdf时，主要关注的是其API的使用，而非直接操作该库的内部目录结构。

2. 项目的启动文件介绍 - App.tsx

在您的App.tsx或应用的主入口文件中，您将集成PDF生成功能。示例代码展示如何从HTML字符串生成PDF并提供给用户下载或者预览：

import React, {useState} from 'react';
import {Alert, TouchableOpacity, StyleSheet, Text, View} from 'react-native';
import RNHTMLtoPDF from 'react-native-html-to-pdf';

function App() {
    // 状态管理PDF生成过程
    const [loading, setLoading] = useState(false);

    const generatePDF = async () => {
        setLoading(true);
        const options = {
            html: '<h1>Hello, World!</h1>', // 您的HTML字符串
            fileName: 'test',           // 文件名
            directory: 'Documents',     // 存储目录
        };
        try {
            const file = await RNHTMLtoPDF.convert(options);
            Alert.alert("Success", `File saved to ${file.filePath}`);
            setLoading(false);
        } catch (error) {
            Alert.alert('Error', error.message);
            setLoading(false);
        }
    };

    return (
        <View style={styles.container}>
            {loading ? <Text>Loading...</Text> :
                <TouchableOpacity style={styles.button} onPress={generatePDF}>
                    <Text style={styles.text}>生成PDF</Text>
                </TouchableOpacity>}
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
        alignItems: 'center',
        justifyContent: 'center',
    },
    button: {...}, // 样式定义省略...
    text: {...},   // 样式定义省略...
});

export default App;

3. 项目的配置文件介绍

对于react-native-html-to-pdf的使用，核心配置通常涉及环境设置和依赖安装。

安装依赖

通过npm或yarn添加必要的库及其类型定义：

npm install react-native-html-to-pdf
npm install @types/react-native-html-to-pdf

对于iOS，若React Native版本≥0.60，则得益于自动链接，无需手动链接；而对于Android，需确保已添加外部存储读写权限至AndroidManifest.xml：

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

但请注意，Android 10（API级别29）及以上版本推荐使用Scoped Storage策略，并考虑适配requestLegacyExternalStorage标志或迁移至Android Storage SDK的新方法。

以上即为使用react-native-html-to-pdf的基本框架和配置简介。实际开发中，您可能还需根据具体需求调整配置和文件结构。

react-native-html-to-pdfConvert html strings to PDF documents using React Native项目地址:https://gitcode.com/gh_mirrors/re/react-native-html-to-pdf