Font encoding issue

[mjm918]

What react-native version are you using?

0.59.10

What react-native-pdf version are you using?

5.1.0

What platform does your issue occur on? (android/ios/both)

android

Describe your issue as precisely as possible :

1. Steps to reproduce the issue or to explain in which case you get the issue
2. Interesting logs

Bug occurs in the new version of Android. Mostly vivo & oppo users faced this issue.

Hi we have been using this library for almost 2years+. Since last week we have been receiving complaint from user that the pdf preview is not correct. All the fonts become some unreadable random characters. What could be the possible issue?

Join a screenshot or video of the problem on the simulator or device?

Show us the code you are using?

[maxpowa]

@mjm918 what was your resolution for this issue? I have seen this same issue as well.

[saadzia]

@mjm918 I am facing same issue in huawei phones. Did you find a solution?

[mjm918]

Hi It's not happening due to this library. I used react-native-html-to-pdf to convert html to pdf, which caused this issue.

react-native-html-to-pdf uses native browser to load html and then convert it to pdf using android.print extension. Due to recent update in Android WebView caused this issue in some Android Phones which uses custom Android OS.

In short, until Android WebView fix this issue, we can't do anything. So I came up with an alternative. I used iText to convert html to pdf. You can check my codes below:

In android/app/build.gradle file, add iText library in dependencies closure

implementation 'com.itextpdf:itext7-core:7.1.8'
implementation 'com.itextpdf:html2pdf:2.0.1'

In src/main/java/com/yourpackage OR android/app/java/com.yourpackage folder create 2 Java files:

PDFGenManager.java
PDFGenPackage.java

In PDFGenManager.java file:

package com.yourpackage;

import android.util.Log;

import androidx.annotation.NonNull;
import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.bridge.WritableNativeMap;
import com.itextpdf.html2pdf.ConverterProperties;
import com.itextpdf.html2pdf.HtmlConverter;
import com.itextpdf.kernel.events.Event;
import com.itextpdf.kernel.events.IEventHandler;
import com.itextpdf.kernel.events.PdfDocumentEvent;
import com.itextpdf.kernel.geom.PageSize;
import com.itextpdf.kernel.pdf.PdfArray;
import com.itextpdf.kernel.pdf.PdfDictionary;
import com.itextpdf.kernel.pdf.PdfDocument;
import com.itextpdf.kernel.pdf.PdfName;
import com.itextpdf.kernel.pdf.PdfNumber;
import com.itextpdf.kernel.pdf.PdfPage;
import com.itextpdf.kernel.pdf.PdfReader;
import com.itextpdf.kernel.pdf.PdfWriter;
import com.itextpdf.kernel.pdf.canvas.PdfCanvas;
import com.itextpdf.kernel.pdf.xobject.PdfFormXObject;
import com.itextpdf.kernel.utils.PdfMerger;

import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.nio.charset.StandardCharsets;

public class PDFGenManager extends ReactContextBaseJavaModule {

    private ReactApplicationContext context;
    private File directory;
    private String dirPath;

    public PDFGenManager(@NonNull ReactApplicationContext reactContext) {
        super(reactContext);
        this.context = reactContext;
        File storage = reactContext.getFilesDir();
        File folder = new File(storage.getAbsoluteFile(), "/Downloads/PDFs/");
        this.directory = new File(folder.getAbsolutePath());
        if(!this.directory.exists()){
            this.directory.mkdirs();
        }
        this.dirPath = directory.getPath().concat(File.separator);
    }

    @ReactMethod
    public void convert(ReadableMap options, Callback success, Callback failed){
        if (!options.hasKey("html") || options.getString("html") == null){
            failed.invoke(this.onError("No `html` content found",1404));
            return;
        }
        if (!options.hasKey("fileName") || options.getString("fileName") == null){
            failed.invoke(this.onError("No `fileName` found",1405));
            return;
        }
        final String fileName = options.getString("fileName");
        try{
            String dest = this.dirPath.concat(fileName.concat(".pdf"));
            String tmpHtmlDest = this.dirPath.concat(fileName.concat(".html"));
            FileOutputStream outputStream = new FileOutputStream(tmpHtmlDest);
            outputStream.write(options.getString("html").getBytes(StandardCharsets.UTF_8));
            outputStream.flush();
            outputStream.close();

            ByteArrayOutputStream pdf = createPdf(tmpHtmlDest);
            scalePdf(dest, new ByteArrayInputStream(pdf.toByteArray()), 0.7071f);
            success.invoke(onSuccess(dest));
        } catch (IOException e){
            Log.e("PDFGenManager",e.getMessage());
            failed.invoke(onError(e.getMessage(),1099));
        }
    }

    private WritableMap onError(String message, int code){
        WritableMap map = new WritableNativeMap();
        map.putString("error",message);
        map.putInt("code",code);
        return map;
    }

    private WritableMap onSuccess(String path){
        WritableMap map = new WritableNativeMap();
        map.putString("filePath",path);
        return map;
    }

    @NonNull
    @Override
    public String getName() {
        return "PDFGenerator";
    }

    public static ByteArrayOutputStream createPdf(String htmlSrc) throws IOException {
        ByteArrayOutputStream output = new ByteArrayOutputStream();
        ConverterProperties converterProperties = new ConverterProperties();
        converterProperties.setBaseUri(new File(htmlSrc).getParent());
        PdfWriter writer = new PdfWriter(output);
        PdfDocument pdfDocument = new PdfDocument(writer);
        PdfMerger merger = new PdfMerger(pdfDocument);

        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        PdfDocument temp = new PdfDocument(new PdfWriter(baos));
        temp.setDefaultPageSize(PageSize.A3);
        HtmlConverter.convertToPdf(new FileInputStream(htmlSrc), temp, converterProperties);
        temp = new PdfDocument(new PdfReader(new ByteArrayInputStream(baos.toByteArray())));
        merger.merge(temp, 1, temp.getNumberOfPages());
        temp.close();

        pdfDocument.close();

        return output;
    }

    public void scalePdf(String dest, ByteArrayInputStream input, float scale) throws IOException {
        // Create the source document
        PdfDocument srcDoc = new PdfDocument(new PdfReader(input));
        PdfDocument pdfDoc = new PdfDocument(new PdfWriter(dest));
        ScaleDownEventHandler eventHandler = new ScaleDownEventHandler(scale);
        int n = srcDoc.getNumberOfPages();
        pdfDoc.addEventHandler(PdfDocumentEvent.START_PAGE, eventHandler);

        PdfCanvas canvas;
        PdfFormXObject page;
        for (int p = 1; p <= n; p++) {
            eventHandler.setPageDict(srcDoc.getPage(p).getPdfObject());
            canvas = new PdfCanvas(pdfDoc.addNewPage());
            page = srcDoc.getPage(p).copyAsFormXObject(pdfDoc);
            canvas.addXObject(page, scale, 0f, 0f, scale, 0f, 0f);
        }

        pdfDoc.close();
        srcDoc.close();
    }

    protected class ScaleDownEventHandler implements IEventHandler {
        protected float scale = 1;
        protected PdfDictionary pageDict;

        public ScaleDownEventHandler(float scale) {
            this.scale = scale;
        }

        public void setPageDict(PdfDictionary pageDict) {
            this.pageDict = pageDict;
        }

        @Override
        public void handleEvent(Event event) {
            PdfDocumentEvent docEvent = (PdfDocumentEvent) event;
            PdfPage page = docEvent.getPage();
            page.put(PdfName.Rotate, pageDict.getAsNumber(PdfName.Rotate));

            scaleDown(page, pageDict, PdfName.MediaBox, scale);
            scaleDown(page, pageDict, PdfName.CropBox, scale);
        }

        protected void scaleDown(PdfPage destPage, PdfDictionary pageDictSrc, PdfName box, float scale) {
            PdfArray original = pageDictSrc.getAsArray(box);
            if (original != null) {
                float width = original.getAsNumber(2).floatValue() - original.getAsNumber(0).floatValue();
                float height = original.getAsNumber(3).floatValue() - original.getAsNumber(1).floatValue();
                PdfArray result = new PdfArray();
                result.add(new PdfNumber(0));
                result.add(new PdfNumber(0));
                result.add(new PdfNumber(width * scale));
                result.add(new PdfNumber(height * scale));
                destPage.put(box, result);
            }
        }
    }
}

In PDFPackage.java file:

package com.yourpackage;

import androidx.annotation.NonNull;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class PDFGenPackage implements ReactPackage {
    @NonNull
    @Override
    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new PDFGenManager(reactContext));
        return modules;
    }

    @NonNull
    @Override
    public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

In your MainApplication.java file, in getPackages() add your package:

new PDFGenPackage()

Then create a javascript file for bridging. In my case, I named the file PDFGen.js. And then paste this code:

// @flow
import {NativeModules, Platform} from "react-native";
import RNHTMLtoPDF from 'react-native-html-to-pdf';
type Options = {
    html: string;
    fileName: string;
    base64?: boolean;
};
type Result = {
    filePath: string;
    base64?: string;
};
async function convert(opts: Options): Promise<Result>{
    return new Promise<Result>((resolve,reject)=>{
        if (Platform.OS === "android"){
            NativeModules.PDFGenerator.convert(opts,(success)=>{
                resolve(success);
            },(failed)=>{
                RNHTMLtoPDF.convert({...opts,bgColor:"#FFFFFF"}).then((content)=>{
                    resolve({ filePath: content.filePath, base64: content.base64 });
                }).catch(er=>{
                    reject(er);
                });
            });
        } else {
            RNHTMLtoPDF.convert({...opts,bgColor:"#FFFFFF"}).then((content)=>{
                resolve({ filePath: content.filePath, base64: content.base64 });
            }).catch(er=>{
                reject(er);
            });
        }
    });
}
const PDFGen = {convert};
export {convert};
export default PDFGen;

And then finally call the function await PDFGen.convert(options); to convert HTML to PDF

[saadzia]

@mjm918 thanks for sharing your solution. I'll try this out until android webview issue is fixed.

[saadzia]

@mjm918 I am getting this error whenever i try above code.

Failed to allocate a 203423760 byte allocation with 25165824 free bytes and 132MB until OOM

[mjm918]

@mjm918 I am getting this error whenever i try above code.

Failed to allocate a 203423760 byte allocation with 25165824 free bytes and 132MB until OOM

Hi you need to enable multidex in your app

[angel-venchev-toptal]

If I understand correctly the workaround includes using iText which is a paid library.
Are there any other solutions to this?

[mjm918]

Hi @angel-venchev-toptal someone shared a solution to stackoverflow. you can check this answer

The webview fix is available in version : 103.0.5060.70

I haven't tried yet and i'm afraid asking (and guiding) all my app users to update webview won't be a easy job