2

I am using Django Rest Framework and React.js for my application. As part of the application I generate pdf in the backend and then send them to the frontend to be displayed. This functionality is working, if not for the fact that the font in my pdf at the front-end looks different.

In my backend I am using reportlab to generate the pdfs, using buffer = io.BytesIO() as object of reportlab.pdfgen canvas. Then in my view, I send it via FileResponse. The font family I use id 'Roboto'.

In my frontend I then call the API via Axios and open the pdf with the following code.

    const config = {
        headers: {
                Authorization: `Bearer ${access_token}`
            }
        }

    const { data } = await axios.get(
            `/api/my/url/`,
            config
        )

    const file = new Blob([data], { type: "application/pdf" });
    //Build a URL from the file
    const fileURL = URL.createObjectURL(file);
    //Open the URL on new Window
    const pdfWindow = window.open();
    pdfWindow.location.href = fileURL;

This correctly opens my pdf in a new window. However, the font of my pdf is changed, the characters look a bit different (and utf-8 symbols are completely changed with other symbols).

When I test my API with Postman, the downloaded pdf looks exactly as it should, so I believe the problem is in the frontend.

I'm not sure what is the cause of the problem, so I would really appreciate help!

Gu_sp
  • 75
  • 1
  • 5

0 Answers0