如何将api数据从react-native-html-to-pdf传递给html,反之亦然

问题描述 投票:0回答:1

我正在使用react-native-html-to-pdf包创建一个pdf文件,我想将react-native的api响应传递给html并从html接收数据。此npm软件包可用的选项非常少

包装中没有选项,我可以使用它,有人可以帮助我吗?下面是我的代码。

import React, { Component } from 'react';
import { Text, TouchableOpacity, View, StyleSheet, Image, PermissionsAndroid, Platform,} from 'react-native';
import RNHTMLtoPDF from 'react-native-html-to-pdf';
import htmlContent from './htmlContent'

export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
        apiData: [],
        filePath: ''
    }
  }

  askPermission() {
    var that = this;
    async function requestExternalWritePermission() {
      try {
        const granted = await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
          {
            title: 'External Storage Write Permission',
            message:
              'App needs access to Storage data in your SD Card ',
          }
        );
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
          that.createPDF();
        } else {
          alert('WRITE_EXTERNAL_STORAGE permission denied');
        }
      } catch (err) {
        alert('Write permission err', err);
        console.warn(err);
      }
    }
    if (Platform.OS === 'android') {
      requestExternalWritePermission();
    } else {
      this.createPDF();
    }
  }

    componentDidMount(){
        fetch(`http://API`)
            .then((response) => response.json())
            .then((responseJson) => {
                **console.log("DATA", responseJson) // NEED TO SEND THIS DATA TO "HTML"**
                this.setState(() => ({
                    apiData: responseJson
                }))
        })
    }

  async createPDF() {
    let options = {
      html:htmlContent, // API DATA SHOULD BE SENT TO HTML
      fileName: 'RTT Report',
      directory: 'docs',
      width: 800,
    };
    let file = await RNHTMLtoPDF.convert(options);
    console.log(file.filePath);
    this.setState({filePath:file.filePath});
  }

  render() {
    return (
      <View style={styles.MainContainer}>
        <TouchableOpacity onPress={this.askPermission.bind(this)}>
        <View>
          <Image
            //We are showing the Image from online
            source={{
              uri:
                'https://raw.githubusercontent.com/AboutReact/sampleresource/master/pdf.png',
            }}
            //You can also show the image from you project directory like below
            //source={require('./Images/facebook.png')}
            style={styles.ImageStyle}
          />
          <Text style={styles.text}>Create PDF</Text>
          </View>
        </TouchableOpacity>
        <Text style={styles.text}>{this.state.filePath}</Text>
      </View>
    );
  }
}
react-native html-to-pdf
1个回答
0
投票

在createPDF方法中:

// html:htmlContent, // API DATA SHOULD BE SENT TO HTML
html: this.state.apiData // <-- you have stored your html in the state
© www.soinside.com 2019 - 2024. All rights reserved.