尝试生成 PDF 并使用 React Native 查看或通过电子邮件发送

Question

我最近几天都在玩react-native-html-to-pdf（https://github.com/christopherdro/react-native-html-to-pdf），react-native-mail（由chirag04 ）和react-native-view-pdf（由cnjon）

我还没有尝试过parkerdan的react-native-mail的另一个版本，但是chrirag04的版本基本上破坏了我所有的项目并且卸载起来很痛苦。

react-native-html-to-pdf 似乎没有生成任何错误，而且我似乎无法访问生成的 pdf。这是我正在运行的代码片段：

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

...

createPDF() {

     var options = {

        html: '<h1>PDF TEST</h1>', // HTML String

        // ****************** OPTIONS BELOW WILL NOT WORK ON ANDROID **************                              
        fileName: 'test',          /* Optional: Custom Filename excluded extention
                                Default: Randomly generated
                              */


        directory: 'docs',         /* Optional: 'docs' will save the file in the `Documents`
                                Default: Temp directory
                              */

        height: 800,               /* Optional: 800 sets the height of the DOCUMENT that will be produced
                                Default: 612
                              */
        width: 1056,               /* Optional: 1056 sets the width of the DOCUMENT that will produced
                                Default: 792
                              */
        padding: 24,                /* Optional: 24 is the # of pixels between the outer paper edge and
                                        corresponding content edge.  Example: width of 1056 - 2*padding
                                        => content width of 1008
                                Default: 10
                              */
    };
    RNHTMLtoPDF.convert(options).then((filePath) => {
        AlertIOS.alert(
            'creat pdf',
            'filePath=' + filePath
        );


        return (
                <PDFView ref={(pdf)=>{this.pdfView = pdf;}}
                     src={filePath}
                     onLoadComplete = {(pageCount)=>{
                        this.pdfView.setNativeProps({
                            zoom: 1.5
                        });
                     }}
                /> 
        )
    });
};

稍后在代码中我用以下方式调用它：

<TouchableHighlight onPress={this.createPDF} style={styles.button}>
               <Text>create pdf </Text>
</TouchableHighlight>

我收到了 AlertIOS，其中包含一些看起来像有效文件路径的内容（任何检查路径是否正确的提示，请告诉我） 但就是这样，我似乎在任何地方都找不到 test.pdf 文档。 谁能告诉我我做错了什么？

非常感谢， 舍夫特

Answer 1

我认为文件路径是文档目录，您可以通过首先单击Xcode中的Windows选项来浏览文件路径，然后单击设备选项后查找设备选项，您设备的所有信息都会出现，然后选择应用程序并查看它的容器和你会找到你的pdf文件。

var localpath= RNFS.DocumentDirectoryPath + filePath
    <PDFView ref={(pdf)=>{this.pdfView = pdf;}}
                         path={localpath}
                         onLoadComplete = {(pageCount)=>{
                            this.pdfView.setNativeProps({
                                zoom: 1.5
                            });
                         }}
                    /> 

写路径代替 src，因为它已被弃用。

Answer 2

import React, { Component } from 'react';
import {
  AlertIOS,
  AppRegistry,
  StyleSheet,
  Text,
  TouchableHighlight,
  View
} from 'react-native';

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

export default class testApp extends Component {

 createPDF() {
    var options2 = {
    html: '<h1>PDF TEST</h1>', // HTML String

  // ****************** OPTIONS BELOW WILL NOT WORK ON ANDROID **************                              
    fileName: 'test2',          /* Optional: Custom Filename excluded extension
                                Default: Randomly generated
                              */

    directory: 'docs',         /* Optional: 'docs' will save the file in the `Documents`
                                Default: Temp directory */

    base64: true ,               


    height: 800,                
    width: 1056,               /* Optional: 1056 sets the width of the DOCUMENT that will produced
                                Default: 792
                              */
    padding: 24,                /* Optional: 24 is the # of pixels between the outer paper edge and
                                        corresponding content edge.  Example: width of 1056 - 2*padding
                                        => content width of 1008
                                Default: 10
                              */
       };

        RNHTMLtoPDF.convert(options2).then((data2) => {
        console.log(data2.filePath);
         console.log(data2.base64);
        AlertIOS.alert(
            'options2 filename' + options2.fileName,
            'data2 filePath=' + data2.filePath
        );
    });
 }


 render() {
    return (
  <View style={styles.container}>
    <Text style={styles.welcome}>
      Welcome to testApp
    </Text>

    <TouchableHighlight onPress={this.createPDF}>
    <Text>Create PDF</Text>
  </TouchableHighlight>

    <Text style={styles.instructions}>
      Press Cmd+R to reload,{'\n'}
      Cmd+D or shake for dev menu
    </Text>
    </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
   justifyContent: 'center',
 alignItems: 'center',
 backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});


AppRegistry.registerComponent('testApp', () => testApp);