react-native-pdf-view - Wie pdfView mit base64 oder blob zu füllen

Question

Ich benutze die react-native-pdf-view Bibliothek und ich habe Probleme beim Bestücken der PDFView mit einem PDF.

Wie mein Projekt funktioniert, ist, dass ich eine base64 pdf vom Server erhalten, wo ich dann react-native-fs wie so mit Hilfe der Bibliothek in dem Android-Dateisystem speichern:
(Dies funktioniert)

saveFile(filename){ 

    var base64Image = this.state.imageBase64; 

    // create a path you want to write to 
    var path = RNFS.DocumentDirectoryPath + '/' + filename; 

    // write the file 
    RNFS.writeFile(path, base64Image, 'base64').then((success) => { 
    console.log('FILE WRITTEN!'); 
    this.setState(
     {pdf_dirPath: path} 
    ); 
    this._display_fileAttachment() 
    }) 
    .catch((err) => { 
    console.log(err.message); 
    }); 
} 

I dann versuchen, die pDF-Ansicht mit diesem bevölkert:

<PDFView 
    ref={(pdf)=>{this.pdfView = pdf;}} 
    src={"path/To/base64/pdf"} 
    style={styles.pdf} 
/> 

Frage

Muss die react-native-pdf-Ansicht eine Dateiposition einnehmen oder kann eine base64-PDF oder ein Blob sein.

Wenn es eine Base64 oder Blob nehmen kann, erklären Sie bitte oder geben Sie Beispielcode, wie es gemacht wird.
Dank

Nb: This StackOverflow question ist sehr ähnlich, aber ich muß wissen, wie in welcher Form die base64 aus dem Dateisystem zu speichern oder abrufen und wie das pdf zu füllen.

Answer 1

Für alle, die das gleiche Problem haben, hier ist die Lösung.

Lösung

reagieren-nativive-pdf-Ansicht muss den Dateipfad zum pdf_base64 nehmen.

Zuerst habe ich die react-native-fetch-blob verwendet, um die PDF-Base64 vom Server anzufordern. (Da RN-Abruf-API BLOBs noch nicht unterstützt).

Auch ich entdeckte, dass Reactive-Native-Fetch-Blob auch eine FileSystem-API hat, die viel besser dokumentiert und leichter zu verstehen ist als die "react-native-fs" -Bibliothek. (Check out its FileSystem API documentation)

Empfangen von base64 pdf und es auf einen Dateipfad zu speichern:

var RNFetchBlob = require('react-native-fetch-blob').default; 

const DocumentDir = RNFetchBlob.fs.dirs.DocumentDir; 

getPdfFromServer: function(uri_attachment, filename_attachment) { 
    return new Promise((RESOLVE, REJECT) => { 

     // Fetch attachment 
     RNFetchBlob.fetch('GET', config.apiRoot+'/app/'+uri_attachment) 
     .then((res) => { 

      let base64Str = res.data; 
      let pdfLocation = DocumentDir + '/' + filename_attachment; 

      RNFetchBlob.fs.writeFile(pdfLocation, pdf_base64Str, 'base64'); 
      RESOLVE(pdfLocation); 
     }) 
    }).catch((error) => { 
     // error handling 
     console.log("Error", error) 
    }); 
} 

Was ich falsch zu machen war stattdessen die pdf_base64Str zum Speicherort der Datei zu speichern, wie ich in dem obigen Beispiel tat. Ich habe es so gespeichert:

var pdf_base64= 'data:application/pdf;base64,'+pdf_base64Str; 

was falsch war.

Populate PDF-Ansicht mit Dateipfad:

<PDFView 
    ref={(pdf)=>{this.pdfView = pdf;}} 
    src={pdfLocation} 
    style={styles.pdf} 
/> 

Answer 2

Es scheint, als gäbe es einen viel einfacheren Weg, dies zu tun. Sagen Sie einfach RNFletchBlob, um so direkt auf der Festplatte zu speichern. Beachten Sie, dass Sie die Datei später bereinigen müssen.

RNFetchBlob 
    .config({ 
    // add this option that makes response data to be stored as a file. 
    fileCache : true, 
    appendExt : 'pdf' 
    }) 
    .fetch('GET', 'http://www.example.com/file/example.zip', { 
    //some headers .. 
    }) 
    .then((res) => { 
    // the temp file path 
    this.setState({fileLocation: res.path()}); 
    console.log('The file saved to ', res.path()) 
    }) 

Und dann später

<PDFView 
    ref={(pdf)=>{this.pdfView = pdf;}} 
    path={this.state.fileLocation} 
    onLoadComplete = {(pageCount)=>{ 
    this.pdfView.setNativeProps({ 
     zoom: 1.0 
    }); 
    console.log("Load Complete. File has " + pageCount + " pages."); 
    }} 
    style={styles.pdf}/>