web-dev-qa-db-ja.com

PDFをAndroidファイルシステムに保存してから表示する方法PDF --react-native

react-native-fs を使用しており、PDFファイルのbase64をAndroidエミュレーターファイルシステムに保存しようとしています。

サーバーからbase64でエンコードされたPDFを受け取ります。
次に、base64文字列を次の行でデコードします。

var pdfBase64 = 'data:application/pdf;base64,'+base64Str;

saveFile（）関数

saveFile(filename, pdfBase64){

    // 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!');
     })
     .catch((err) => {
       console.log("SaveFile()", err.message);
     });
}

エラー
pdfBase64を保存しようとすると、saveFile（）関数が次のエラーをキャッチします。

bad base-64

質問
どこで、何が間違っているのか誰かに教えてもらえますか？ありがとう。

react-nativebase64react-native-androidreact-native-fs
10
Larney

同じ問題を抱えている人のために、ここに解決策があります。

解決

react-nativive-pdf-viewは、pdf_base64へのファイルパスを取る必要があります。

まず、 react-native-fetch-blob を使用してサーバーからpdf base64を要求しました（RNフェッチAPIはまだBLOBをサポートしていないため）。

また、react-native-fetch-blobにはFileSystem APIも含まれていることを発見しました。これは、「react-native-fs」ライブラリよりもはるかに文書化されており、理解しやすいものです。 （ FileSystem 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;

それは間違っていた。

Populate PDFファイルパス付きのビュー：

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

（ react-native-fetch-blob に基づく）フェッチとPDF URL経由）の表示を処理するための新しいパッケージがあります： react- native-pdf 。

0
Johannes Filter