How to save pdf to android file system and then view PDF - react-native

Question

I am using the react-native-fs and I am trying to save a base64 of a pdf file to my android emulators file system.

I receive base64 encoded pdf from the server.
I then decode the base64 string with the line:

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

saveFile() function

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

Error
When I try saving the pdfBase64 the saveFile() function catches the following error:

bad base-64

Question
Can anyone tell where or what I am doing wrong? Thanks.

Vivyanne

Answer 1

For anyone having the same problem, here is the solution.

Solution

react-nativive-pdf-view must take the file path to the pdf_base64.

Firstly, I used the react-native-fetch-blob to request the pdf base64 from the server.(Because RN fetch API does not yet support BLOBs).

Also I discovered that react-native-fetch-blob also has a FileSystem API which is way better documented and easier to understand than the 'react-native-fs' library. (Check out its FileSystem API documentation)

Receiving base64 pdf and saving it to a file path:

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

What I was doing wrong was instead of saving the pdf_base64Str to the file location like I did in the example above. I was saving it like this:

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

which was wrong.

Populate PDF view with file path:

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

Vivyanne

what is value of pdf_base64Str you have never given any value in the answer. – Graybill

@anbuselvan could you find what is pdf_base64Str here? – Masterson

what is pdf_base64Str?? I don't see any variable here – Hornback

It's mentioned in the question. "I receive base64 encoded pdf from the server." – Vivyanne

Answer 2

There is a new package to handle the fetching (based on react-native-fetch-blob) and displaying of the PDF via URL: react-native-pdf.

Mita

Answer 3

Remove application type in base64 string and it's working for me

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

To

var pdfBase64 = base64Str;

Unstrap