react-nativereact-native-iosreact-native-fetch-blob

Need to be able to download a PDF given a BASE64 String upon componentdidmount


I am trying to give the ability to download a PDF given a Base64 string. I am able to view the PDF using "react-native-view-pdf". Just unable to figure out how to actually get the file to download. This is going to need to work for android and ios.

I have tried various forums and am just getting no where sadly.

Note: the this.props.pdf is the Base64 string.

Attempt 1)

var path = RNFetchBlob.fs.dirs.DocumentDir + "/bill.pdf";
RNFetchBlob.fs.writeFile(path, this.props.pdf, "base64").then(res => {
  console.log("File : ", res);
});

Attempt 2)

RNFetchBlob.config({
  fileCache : true,
  appendExt : 'pdf'
})
.fetch('GET',`${this.props.PDFLink}`)
.then((res) => {
  // open the document directly
  if(Platform.OS == "ios"){
  RNFetchBlob.ios.previewDocument(res.path())
  }
  else{
    RNFetchBlob
    .config({
        addAndroidDownloads : {
            useDownloadManager : true, // <-- this is the only thing required
            // Optional, override notification setting (default to true)
            notification : false,
            // Optional, but recommended since android DownloadManager will fail when
            // the url does not contains a file extension, by default the mime type will be text/plain
            mime : 'application/pdf',
            description : 'File downloaded by download manager.'
        }
    })
    .fetch('GET',`${this.props.PDFLink}`)
    .then((resp) => {
      // the path of downloaded file
      resp.path()
    })
  }
})
.catch(error => {
  console.error(error);
});

I am expecting to see that when the screen loads, that the user can download the PDF. I already have it displaying to the user, just want them to have the ability to download the file as well.


Solution

  • For downloading files you can use RNFetchBlob.fs.writeFile api from rn-fetch-blob as shown below. You can also refer to other filestream apis from their documentation https://github.com/joltup/rn-fetch-blob#user-content-file-stream

    RNFetchBlob
            .config({
                addAndroidDownloads : {
                    useDownloadManager : true, // <-- this is the only thing required
                    // Optional, override notification setting (default to true)
                    notification : false,
                    // Optional, but recommended since android DownloadManager will fail when
                    // the url does not contains a file extension, by default the mime type will be text/plain
                    mime : 'application/pdf',
                    description : 'File downloaded by download manager.'
                }
            })
            .fetch('GET',`${this.props.PDFLink}`)
            .then((resp) => {
              // the path of downloaded file
              // resp.path()
              let base64Str = resp.data;
              let pdfLocation = RNFetchBlob.fs.dirs.DocumentDir + '/' + 'test.pdf';
              RNFetchBlob.fs.writeFile(pdfLocation, RNFetchBlob.base64.encode(base64Str), 'base64');
    
            })
    

    Hope this helps :)