Rn-fetch-blob: Download Pdf file

[fa16mscs0004]

I want to download a pdf file from an url..this code download file but always says download complete by clicking on that notification it is unanble to open in pdf viewer.

RNFetchBlob.config({
fileCache : true,
// android only options, these options be a no-op on IOS
addAndroidDownloads : {
// Show notification when response data transmitted
notification : true,
// Title of download notification
title : 'Great ! Download Success ! :O ',
// File description (not notification description)
description : 'A PDFfile.',
mime : 'application/pdf',
// Make the file scannable by media scanner
mediaScannable : true,
}
})
.fetch('GET', 'http://example.com/app/payment/mobileTicketPrint')
.then((resp) => {
// the path of downloaded file
console.log('resp of pdf',resp);
console.log('The file saved to ', resp.path());
resp.path()
})

[ghost]

Do you download background on IOS? I cannot handle download background though I did like document https://github.com/Jacse/rn-fetch-blob#ios-background-uploading

[Maskedman99]

You have to explicitly mention the file extension in some cases. Also I would recommend to use android Download Manager. Here is my code, this worked for me.

 const { config, fs } = RNFetchBlob
      let DownloadDir = fs.dirs.DownloadDir     // this is the Downloads directory.
      let options = {
        fileCache: true,
        //  appendExt : extension, //Adds Extension only during the download, optional
         addAndroidDownloads : {
          useDownloadManager : true,      //uses the device's native download manager.
          notification : true,
          //  mime: 'text/plain',
          title : "Notification Title",    // Title of download notification.
          path:  DownloadDir + "/me_"+ '.' + extension, // this is the path where your download file will be in
          description : 'Downloading file.'
        }
      }
      config(options)
      .fetch('GET',"https://whatever_url_u _want/)
      .then((res) => {
        //console.log("Success");
        })
      .catch((err) => {console.log('error')})    // To execute when download  cancelled and other errors
    }

[squalvj]

which device this happen ? android or ios ?
because in android sdk above 21, it need an in app request permission to write or read storage.
did you ask the permission write & read before download the file ?

[Stoneski93]

Hello,
I have the same issue.
I can download any files except PDF files.
Both platforms (iOS and Android)

[evanAtFetchly]

I'm also unable to view downloaded PDFs in iOS within an <Image /> component.

Here's the output of .stat() on the downloaded file:

{
  filename: "RNFetchBlobTmp_4h0eudq1w951cud99cxrfa.pdf"
  lastModified: 1559320406000
  path: "/Users/evanbutler/Library/Developer/CoreSimulator/Devices/604B7CD5-C12D-49C0-826E-C473C8204E77/data/Containers/Data/Application/08C47315-D391-4E39-BA9B-581B1AC7FC69/Documents/RNFetchBlob_tmp/RNFetchBlobTmp_4h0eudq1w951cud99cxrfa.pdf"
  size: 35580
  type: "file
}

[JJMoon]

RN : 0.59.10
Platform : Android
rn-fetch-blob : 0.10.15

I have same problem, but only in Android. In iOS, it works fine.
But, weird thing is. In Android it downloaded PDF successfully just one time. I didn't noticed that, but one time succeeded. I changed many options during testing, I missed the point. But, it doesn't work as the documents say.

In several combinations of options in Android, it sometimes downloads files with format broken form, cannot be opened. Or, it falls back to catch block. Or, download just fails, no file in the designated folder.

And another issue is 'authentication error', which I got from our server.
Is there any possibility in Android to lose session data?

Here is my code.

    const { dirs: { DownloadDir, DocumentDir } } = RNFetchBlob.fs;
    const isIOS = Platform.OS === 'ios';
    const aPath = Platform.select({ ios: DocumentDir, android: DownloadDir });
    const fPath = `${aPath}/${file_name}.pdf`;
    const configOptions = Platform.select({
      ios: {
        fileCache: true,
        path: fPath,
        appendExt: 'pdf',
      },
      android: {
        fileCache: false,
        appendExt: 'pdf',
        // addAndroidDownloads: {
        //   useDownloadManager: true,
        //   title: `${file_name}.pdf`,
        //   description: 'Downloading...',
        //   mime: 'application/pdf',
        //   mediaScannable: true,
        //   notification: true,
        // },
      },
    });

    if (isIOS) { // This iOS block works fine..
      RNFetchBlob.config(configOptions)
        .fetch('GET', fileUrl)
        .then(async (resp) => {
       // This options is for file sharing in iOS. Works fine.
          const options = {
            title: 'Receipt File', // type: 'pdf',
            urls: [`file://${fPath}`],
          };
          await Share.open(options);
          await RNFS.unlink(fPath);
        });
      return;
    }
    // Android Part.  Not working as expected.
    RNFetchBlob.config(configOptions)
      .fetch('GET', fileUrl) // This line downloads file.
      .then((resp) => {
        // This alert pops up. But, rest.path is empty string, not undefined nor null.
        Alert.alert('Success', resp.path());
      })
      .catch((e) => { // Failure callback registration
        Alert.alert('Fail : Catch Failure fetching data');
      });
  }

[JJMoon]

I resolved my issue.
It was a session issue. https://github.com/joltup/rn-fetch-blob/issues/388
The option needs trusty prop. I guess only in Android.
This option looks like credential: 'include' option to header.

{ trusty: true }

[ThibaudLaguerie]

I resolved my issue.
It was a session issue. #388
The option needs trusty prop. I guess only in Android.
This option looks like credential: 'include' option to header.

{ trusty: true }

I tryed your code, and I'm getting an alert error from the catch block. Throwing : Download manager could not resolve downloaded file path.
Do you have any an idea why is it doing this ?

[nihp]

How can I download the pdf file for android using RNFetchblob?

[anhdevit]

This is my example @nihp ni with android you can use Download manager
import RNFetchBlob from 'rn-fetch-blob';

export const downloadPDF = fileUrl => {
  try {
    const {
      dirs: { DownloadDir, DocumentDir },
    } = RNFetchBlob.fs;
    const isIOS = Platform.OS === 'ios';
    const aPath = Platform.select({ ios: DocumentDir, android: DownloadDir });
    console.log('aPath', aPath);
    const date = new Date();
    const file_name = Math.floor(date.getTime() + date.getSeconds() / 2);
    const fPath = `${aPath}/${file_name}.pdf`;
    const configOptions = Platform.select({
      ios: {
        fileCache: true,
        path: fPath,
        appendExt: 'pdf',
      },
      android: {
        fileCache: false,
        appendExt: 'pdf',
        addAndroidDownloads: {
          useDownloadManager: true,
          title: `${file_name}.pdf`,
          description: 'Downloading...',
          mime: 'application/pdf',
          mediaScannable: true,
          notification: true,
        },
      },
    });

    if (isIOS) {
      // This iOS block works fine..
      RNFetchBlob.config(configOptions)
        .fetch('GET', fileUrl)
        .then(async resp => {
          // This options is for file sharing in iOS. Works fine.
          const options = {
            title: 'Receipt File', // type: 'pdf',
            urls: [`file://${fPath}`],
          };
          console.log('fPath', fPath);

          await Share.open(options);
          await RNFS.unlink(fPath);
        })
        .catch(error => {
          console.log('error', error);
        });
      return;
    }
    // Android Part.  Not working as expected.
    RNFetchBlob.config(configOptions)
      .fetch('GET', fileUrl) // This line downloads file.
      .then(resp => {
        // console.log('resp', resp.path);
        // RNFetchBlob.android.actionViewIntent(resp.path(), 'application/pdf');
        // This alert pops up. But, rest.path is empty string, not undefined nor null.
        Alert.alert('Success');
      })
      .catch(e => {
        // Failure callback registration
        console.log('downloadPDF -> e', e);
        // Alert.alert('Tải file không thành công');
      });
  } catch (error) {
    console.log('shareContent -> error', error);
  }
};

[Ajmal0197]

Latest working solution for pdf download

const actualDownload = () => {
    const { dirs } = RNFetchBlob.fs;
    const dirToSave = Platform.OS == 'ios' ? dirs.DocumentDir : dirs.DownloadDir
    const configfb = {
        fileCache: true,
        useDownloadManager: true,
        notification: true,
        mediaScannable: true,
        title: pdfInfo.pdf,
        path: `${dirToSave}/${pdfInfo.pdf}`,
    }
    const configOptions = Platform.select({
        ios: {
            fileCache: configfb.fileCache,
            title: configfb.title,
            path: configfb.path,
            appendExt: 'pdf',
        },
        android: configfb,
    });

    console.log('The file saved to 23233', configfb, dirs);

    RNFetchBlob.config(configOptions)
        .fetch('GET', `https://aquatherm.s3.ap-south-1.amazonaws.com/pdfs/${pdfInfo.pdf}`, {})
        .then((res) => {
            if (Platform.OS === "ios") {
                RNFetchBlob.fs.writeFile(configfb.path, res.data, 'base64');
                RNFetchBlob.ios.previewDocument(configfb.path);
            }
            setisdownloaded(false)
            if (Platform.OS == 'android') {
                showSnackbar('File downloaded');
            }
            console.log('The file saved to ', res);
        })
        .catch((e) => {
            setisdownloaded(true)
            showSnackbar(e.message);
            console.log('The file saved to ERROR', e.message)
        });
}

[AnupamaMouri]

Latest working solution for pdf download

const actualDownload = () => {
    const { dirs } = RNFetchBlob.fs;
    const dirToSave = Platform.OS == 'ios' ? dirs.DocumentDir : dirs.DownloadDir
    const configfb = {
        fileCache: true,
        useDownloadManager: true,
        notification: true,
        mediaScannable: true,
        title: pdfInfo.pdf,
        path: `${dirToSave}/${pdfInfo.pdf}`,
    }
    const configOptions = Platform.select({
        ios: {
            fileCache: configfb.fileCache,
            title: configfb.title,
            path: configfb.path,
            appendExt: 'pdf',
        },
        android: configfb,
    });

    console.log('The file saved to 23233', configfb, dirs);

    RNFetchBlob.config(configOptions)
        .fetch('GET', `https://aquatherm.s3.ap-south-1.amazonaws.com/pdfs/${pdfInfo.pdf}`, {})
        .then((res) => {
            if (Platform.OS === "ios") {
                RNFetchBlob.fs.writeFile(configfb.path, res.data, 'base64');
                RNFetchBlob.ios.previewDocument(configfb.path);
            }
            setisdownloaded(false)
            if (Platform.OS == 'android') {
                showSnackbar('File downloaded');
            }
            console.log('The file saved to ', res);
        })
        .catch((e) => {
            setisdownloaded(true)
            showSnackbar(e.message);
            console.log('The file saved to ERROR', e.message)
        });
}

actullalyyy inside usestate is downloaded is not getting updated .......

[Ajmal0197]

Latest working solution for pdf download

const actualDownload = () => {
    const { dirs } = RNFetchBlob.fs;
    const dirToSave = Platform.OS == 'ios' ? dirs.DocumentDir : dirs.DownloadDir
    const configfb = {
        fileCache: true,
        useDownloadManager: true,
        notification: true,
        mediaScannable: true,
        title: pdfInfo.pdf,
        path: `${dirToSave}/${pdfInfo.pdf}`,
    }
    const configOptions = Platform.select({
        ios: {
            fileCache: configfb.fileCache,
            title: configfb.title,
            path: configfb.path,
            appendExt: 'pdf',
        },
        android: configfb,
    });

    console.log('The file saved to 23233', configfb, dirs);

    RNFetchBlob.config(configOptions)
        .fetch('GET', `https://aquatherm.s3.ap-south-1.amazonaws.com/pdfs/${pdfInfo.pdf}`, {})
        .then((res) => {
            if (Platform.OS === "ios") {
                RNFetchBlob.fs.writeFile(configfb.path, res.data, 'base64');
                RNFetchBlob.ios.previewDocument(configfb.path);
            }
            setisdownloaded(false)
            if (Platform.OS == 'android') {
                showSnackbar('File downloaded');
            }
            console.log('The file saved to ', res);
        })
        .catch((e) => {
            setisdownloaded(true)
            showSnackbar(e.message);
            console.log('The file saved to ERROR', e.message)
        });
}

actullalyyy inside usestate is downloaded is not getting updated .......

Maybe your RNfetchBlob method is not working follow below link:
https://stackoverflow.com/questions/56887851/react-native-download-pdf-file-with-rn-fetch-blob-on-click-a-button
For iOS follow my code.