The PDF file is NOT Created - Wrong filePath

[Bilal-Abdeen]

Recently, RNHTMLtoPDF.convert() stopped doing anything! No error is provided, and the file is not created. However, I noticed that the filePath, which it uses does NOT actually exist (to the best of my knowledge.) This occurs on Android. I have not, yet, tried it on iOS.

build.grade:

buildToolsVersion = "30.0.2" 
minSdkVersion = 21 		
compileSdkVersion = 30 	
targetSdkVersion = 30 		
ndkVersion = "21.4.7075529" 

googlePlayServicesAuthVersion = "19.2.0" 
kotlinVersion = "1.6.0" 

My code:

if (Platform.OS === "android") {
	directoryPath = "Download"; 
}
else {
	directoryPath = "Documents"; 
}

const _createPDF = async () => {
	try {
		let file = await RNHTMLtoPDF.convert({
			html: htmlContents,
			fileName: "myFileName",
			directory: directoryPath, 
		});
		console.log("PDF - file.filePath:", file.filePath, ); // results in the following path: 
		// /storage/emulated/0/Android/data/<myAppName>/files/Download/myFileName.pdf"
		// it should be: /storage/emulated/0/Download/myFileName.pdf
	} 
	catch (err) {
		console.log("PDF - inside _createPDF - catch - err:", err, ); 
	}
};
try {
	await _createPDF(); 
	console.log("PDF - after calling _createPDF successfully"); // <<<<<<<<< The code reaches this point with no errors
} 
catch (err) {
	console.log("PDF - after calling _createPDF - catch - err:", err, ); 
}

Versions:

"react-native": "0.66.4",
"react-native-html-to-pdf": "^0.12.0",

[Prat1143]

Facing the same problem. Path is showing - /storage/emulated/0/Android/data/com.reactnative/files/Documents/test.pdf
But no file is being generated.

[Allstern]

If you guys still have an issue concerning the file path and the pdf not getting created in the appropriate folder.
I have found a work around.

Go directly to the source code in your node module
react-native-html-pdf -> android -> com -> christopherdro -> htmltopdf -> RNHTMLtoPDFModule.java
In the convert() function change this code block

File path = (Environment.MEDIA_MOUNTED.equals(state)) ?
          new File(mReactContext.getExternalFilesDir(null), options.getString(DIRECTORY)) :
          new File(mReactContext.getFilesDir(), options.getString(DIRECTORY));

with

File path = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DOCUMENTS), options.getString(DIRECTORY));

And that should change the file path to the appropriate location inside your emulator/device.

[raineriojr98]

@Allstern "react-native-html-pdf -> android ..." not exists. only "index.d.ts, license, package.json and readme". am I looking in the wrong folder?

[Allstern]

@Allstern "react-native-html-pdf -> android ..." not exists. only "index.d.ts, license, package.json and readme". am I looking in the wrong folder?

In your node module folder
go to the package folder.
Ex:
NodeModule -> react-native-html-pdf -> android ...

[raineriojr98]

@Allstern
It worked, Thank you!!!

[Antonin-Keuck]

Did you find a solution or another library to convert html to pdf ? (Using react native)
The above answer didn't work for me on android device

[ravis-farooq]

If you guys still have an issue concerning the file path and the pdf not getting created in the appropriate folder. I have found a work around.

Go directly to the source code in your node module react-native-html-pdf -> android -> com -> christopherdro -> htmltopdf -> RNHTMLtoPDFModule.java In the convert() function change this code block

File path = (Environment.MEDIA_MOUNTED.equals(state)) ?
          new File(mReactContext.getExternalFilesDir(null), options.getString(DIRECTORY)) :
          new File(mReactContext.getFilesDir(), options.getString(DIRECTORY));

with

File path = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DOCUMENTS), options.getString(DIRECTORY));

And that should change the file path to the appropriate location inside your emulator/device.

Thanks alot it worked for me for others i would recommend you to use patch-package
https://yarnpkg.com/package/patch-package so that your changes may retain and have a quick fix.

[mansilaad]

I am unable find file on ios -

file path - "/var/mobile/Containers/Data/Application/..some id.../Documents/file.pdf"

Can someone help here....

[mansilaad]

If you guys still have an issue concerning the file path and the pdf not getting created in the appropriate folder. I have found a work around.

Go directly to the source code in your node module react-native-html-pdf -> android -> com -> christopherdro -> htmltopdf -> RNHTMLtoPDFModule.java In the convert() function change this code block

File path = (Environment.MEDIA_MOUNTED.equals(state)) ?
          new File(mReactContext.getExternalFilesDir(null), options.getString(DIRECTORY)) :
          new File(mReactContext.getFilesDir(), options.getString(DIRECTORY));

with

File path = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DOCUMENTS), options.getString(DIRECTORY));

And that should change the file path to the appropriate location inside your emulator/device.

Can we customize the location of file ??

[Cyberfolks]

Yes you can. as i did changed with new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DOWNLOADS), options.getString(DIRECTORY)); for more details you can check https://developer.android.com/reference/android/os/Environment

[BraveEvidence]

This will help https://www.youtube.com/watch?v=4CBUXv8d0I0

[Jaybee4real]

Yes you can. as i did changed with new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DOWNLOADS), options.getString(DIRECTORY)); for more details you can check https://developer.android.com/reference/android/os/Environment

This crashes the application when a 'directory' key is passed after changing to this, I am on a Samsung device running on android 12

[ghost]

My app crashed when build apk with error: "fd cannot be null"

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[aneebiqbal]

If you guys still have an issue concerning the file path and the pdf not getting created in the appropriate folder. I have found a work around.

Go directly to the source code in your node module react-native-html-pdf -> android -> com -> christopherdro -> htmltopdf -> RNHTMLtoPDFModule.java In the convert() function change this code block

File path = (Environment.MEDIA_MOUNTED.equals(state)) ?
          new File(mReactContext.getExternalFilesDir(null), options.getString(DIRECTORY)) :
          new File(mReactContext.getFilesDir(), options.getString(DIRECTORY));

with

File path = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DOCUMENTS), options.getString(DIRECTORY));

And that should change the file path to the appropriate location inside your emulator/device.

it worked thanks.

[FranciscoMendes10866]

What I'm going to suggest may meet this issue (I hope). I tried several ways and always had problems on Android while iOS worked perfectly. My approach was to split the responsibility into two different steps. Instead of being completely dependent on react-native-html-to-pdf to do everything, I decided to use it just to transform HTML content into base64. So I used this output to persist it to the device using @dr.pogodin/react-native-fs.

import { PermissionsAndroid, Platform } from 'react-native';
import RNHTMLtoPDF from 'react-native-html-to-pdf';
import {
  DocumentDirectoryPath,
  ExternalStorageDirectoryPath,
  writeFile,
} from '@dr.pogodin/react-native-fs';

const IS_ANDROID = Platform.OS === 'android';
const BASE_PATH = IS_ANDROID ? `${ExternalStorageDirectoryPath}/Download` : DocumentDirectoryPath;

export async function savePDF(html: string, fileName: string): Promise<void> {
  if (IS_ANDROID) {
    const outcome = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
    );
    if (outcome === PermissionsAndroid.RESULTS.DENIED) {
      throw new Error('DENIED "WRITE_EXTERNAL_STORAGE" PERMISSION');
    }
  }

  const result = await RNHTMLtoPDF.convert({ html, base64: true });
  if (!result.base64) {
    throw new Error('Failed to convert HTML to PDF');
  }

  await writeFile(`${BASE_PATH}/${fileName.toLowerCase()}.pdf`, result.base64, 'base64');
}

[AmaraRamzan]

If you guys still have an issue concerning the file path and the pdf not getting created in the appropriate folder. I have found a work around.

Go directly to the source code in your node module react-native-html-pdf -> android -> com -> christopherdro -> htmltopdf -> RNHTMLtoPDFModule.java In the convert() function change this code block

File path = (Environment.MEDIA_MOUNTED.equals(state)) ?
          new File(mReactContext.getExternalFilesDir(null), options.getString(DIRECTORY)) :
          new File(mReactContext.getFilesDir(), options.getString(DIRECTORY));

with

File path = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DOCUMENTS), options.getString(DIRECTORY));

And that should change the file path to the appropriate location inside your emulator/device.

how to set path in ios?

[FaresHamel]

@FranciscoMendes10866 I was thinking about this solution before and I fond that you are working on it , it's work for me with this logic , and it's logical because I need just to convert the html to pdf afer that I will read it and write it with react-native-fs library