I created an app using react-native and have some base64 data from
api. I want convert base64 data to pdf format. if you have any idea
please help me. thanks.
Add a comment
|
3 Answers
You can use react-native-pdf package (https://www.npmjs.com/package/react-native-pdf). If you want to show the pdf in your app , this package would be quite helpful as it supports loading PDFs from base64 string for both ios and android . You can specify the pdf's source from your base64 data as shown in their example :
{uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."}
4 Comments
pokumars
how do I get the base64 string from the fetch response?
ikiK
FYI: does not work with expo
Ho Chung Wong
gshoanganh
I have a lot of base64 images, how do you do that?
I'm assuming, converting to PDF as in saving the base64 format data as PDF in some file.
the following code can help you do the same,
let fPath = Platform.select({
ios: fs.dirs.DocumentDir,
android: fs.dirs.DownloadDir,
});
fPath = `${fPath}/pdfFileName.pdf`;
if (Platform.OS === PlatformTypes.IOS) {
await fs.createFile(fPath, base64Data, "base64");
} else {
await fs.writeFile(fPath, base64Data, "base64");
}
// RNFetchBlob can be used to open the file
4 Comments
Martinocom
Where is the
fs dependency coming from?
senthilbalaji
back then we had something called
react-native-fs, you could check if that still exists.senthilbalaji
you could check this - npmjs.com/package/react-native-fs
Martinocom
I used this import:
import RNFS from 'react-native-fs'; after it, I can just use await RNFS.writeFile(path, fileContent, 'base64');. Reminder: set permissions on iOS and Android! For a "preview only, copy later" approach the RNFS.DocumentDirectoryPath can be used. To copy the file to Download folder, I used await FileSystem.cpExternal(fullPath, fileName, 'downloads'); from import { FileSystem } from 'react-native-file-access';. To preview the PDF I used await FileViewer.open(fullPath) from import FileViewer from 'react-native-file-viewer';You can achieve this by using the rn-fetch-blob library in React Native. First, make sure to install it:
npm install rn-fetch-blob
Then, create a function to download the file and save it locally.
import RNFetchBlob from 'rn-fetch-blob';
async function downloadFile(url: string, fileName: string /* eg : file.pdf; image.png, document.csv*/) {
let dirs = RNFetchBlob.fs.dirs;
let path = `${dirs.DownloadDir}/${fileName}`; //set your path
try {
const res = await RNFetchBlob.config({
fileCache: true,
addAndroidDownloads: {
useDownloadManager: true,
notification: true,
mediaScannable: true,
title: fileName,
path,
},
}).fetch('GET', url)
.then(() => {
// Do any additional processing or UI updates after successful download if needed
})
.catch(() => {
console.error('Download Error:', error);
// Handle errors or show a relevant message to the user
})
} catch (error) {
AppSettings.toggleShowProgress()
console.error('Download Error:', error);
}
}
// Call the function with the URL and desired file name
downloadFile("https://ou.s3.amazonaws.com/5f50c17SignedHeaders=host", 'file.pdf');
// or
downloadFile("https://picsum.photos/200/300", 'image.jpeg');
Make sure to replace the example URLs with your actual API endpoint URLs. The file extension must match the actual format of the file.
This function uses rn-fetch-blob to download the file and save it to the device's download directory. You can then use this local file as needed, for example, to display a PDF.
