react-native-pdf-view - как заполнить pdfView base64 или blob

Я использую библиотеку react-native-pdf-view, и у меня возникли проблемы с заполнением PDFView pdf.

Как работает мой проект, я получаю файл base64 pdf с сервера, где я затем сохраняю файловую систему android с помощью библиотеки react-native-fs Вот так:
(Это прекрасно работает) 

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);
   });
 }

Затем я пытаюсь заполнить представление pdf следующим образом: 

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

Вопрос

Должен ли react-native-pdf-view принимать файл расположение или взять в base64 формате PDF или большого двоичного объекта.

Если он может взять base64 или blob, пожалуйста, объясните или дайте пример кода о том, как это сделать.
СПАСИБО

Nb: этот вопрос StackOverflow очень похож, но мне нужно знать, как в какой форме сохранить или извлечь base64 из файловой системы и как заполнить pdf.

2 2
react-native react-native-android

2 ответа:

Для любого человека, имеющего ту же проблему, вот решение.

Решение

React-nativive-pdf-view должен иметь путь к файлу pdf_base64.

Во-первых, я использовал react-native-fetch-blob для запроса pdf base64 с сервера.(Потому что RN fetch API еще не поддерживает Blob-объекты).

Также я обнаружил, что react-native-fetch-blob также имеет API файловой системы, который намного лучше документирован и проще для понимания, чем "react-native-fs". библиотека. (ознакомьтесь с документацией API файловой системы )

Получение файла base64 pdf и сохранение его в путь к файлу: 

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)
   });
}

То, что я делал неправильно, было вместо сохранения pdf_base64Str в расположение файла, как я сделал в примере выше. Я хранил его вот так: 

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

Что было неправильно.

Заполнить представление PDF путем к файлу: 

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

Похоже, что есть гораздо более простой способ сделать это. Просто скажите RNFletchBlob, чтобы сохранить непосредственно на диск, как это. Обратите внимание, что вам придется очистить файл позже. 

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())
  })

И затем позже 

<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}/>
1