Android PDF font is not readable-CodePudding

This

To debug this issue, we bought a new android 12 phone. First day the PDF was readable in that phone without any issue. After a while, the PDF became unreadable on the new phone also.

On the other side, there are some android phones are facing this issue "partially". In some android phones if we set the html font-weight:bold the PDF is showing perfectly. But unfortunately it's not working in all the phones.

Phones where font-weight:bold is working:

Redmi

Samsung

Phones where we could not find any solution:

Vivo

Oppo

I'm guessing it's happening maybe because of some Android update. After some digging we found out that both react-native-html-to-pdf and react-native-pdf is using WebView for generating and viewing pdf respectively. Could it be because of some Android WebView update causing this issue? I planned create an issue in those library repositories but I think both of them are not actively maintained.

Any suggestion is appreciated.

UPDATE After some more digging we found out that this happens due to converting HTML to PDF.

Code for Generating PDF:

// @author: https://github.com/mddanishansari/ var pdfGenerationStarted = false try { val pdfWebView = WebView(context) if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) { pdfWebView.settings.safeBrowsingEnabled = false } val attributes = getPrintAttributes() val printAdapter = getPrintAdapter(pdfWebView, Math.random().toString()) pdfWebView.webViewClient = object : WebViewClient() { override fun onPageFinished(view: WebView?, url: String?) { super.onPageFinished(view, url) if (pdfWebView.progress == 100 && !pdfGenerationStarted) { pdfGenerationStarted = true val pdfPrinter = PdfPrinter(attributes) pdfPrinter.generate(printAdapter, pdfLocation, onPdfGenerated) Log.i("PDFConverter","HTML has been loaded"); } } } pdfWebView.loadDataWithBaseURL(baseUrl, htmlString, "text/html", "UTF-8", null)

Print Adapter

printAdapter.onLayout(null, printAttributes, null, object : LayoutResultCallback() { override fun onLayoutFinished(info: PrintDocumentInfo, changed: Boolean) { printAdapter.onWrite( arrayOf(PageRange.ALL_PAGES), getOutputFile(path), CancellationSignal(), object : WriteResultCallback() { override fun onWriteFinished(pages: Array<PageRange>) { super.onWriteFinished(pages) onPdfGenerated(path) } }) } }, null)

CodePudding user response：

Encountered the same issue. This issue is because of Android System Webview version. The version which is currently in stable has issues when converting HTML to PDF.

The fix is available in version : 103.0.5060.70

Please update the system webview version and check.

CodePudding user response：

I have implemented that for both iOS and Android successfully.

Here's how

Libs: react-native-html-to-pdf, react-native-print (please use that library instead for printing, much easier)

Imports

import RNHTMLtoPDF from 'react-native-html-to-pdf'; import RNPrint from 'react-native-print';

Options (You can even embed styling)

let options = { html: '...', //plain html like <div style="width: 100%; display: inline-flex; margin-top: -20px; margin-bottom: 20px;"><div style="flex: 1; margin: 5px;"><h5>FİRMA: ' printedEnterpriseName '</h5></div></div></div> fileName: 'test' };

Print

let file = await RNHTMLtoPDF.convert(options) await RNPrint.print({filePath: file.filePath});

Further reading

https://reactnativeexample.com/print-documents-using-react-native/

https://aboutreact.com/react-native-print-html/

CodePudding user response：

There is no solution for this right now. @Saikrishna confirmed also. However, I found an alternative.

I have shared the solution here