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.
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 :)