React.js only displaying input fields when reading PDF form file

Viewed 102

I have an API endpoint in C# that returns a PDF form:

[HttpGet("{id}/print")]
    public async Task<IActionResult> PrintDelivering (Guid id)
    {
        var result = await Mediator.Send(new PrintDelivering.Query { Id = id });
        var document = result.Value;

        // Send PDF to browser
        var stream = new MemoryStream();
        document.Save(stream, false);

        return new FileContentResult(stream.ToArray(), "application/pdf");
    }

I created the PDF form using Libre Office and then reading it with PDFSharp library.

When I test the endpoint on Postman and download the PDF file, it looks great:

Postman result

On my React.js app, I'm displaying the PDF file in separate window:

printDelivering = async (id: string, trackingNumber: string) => {
    try {

        var document = await agent.Deliverings.printDelivering(id);

        //Create a Blob from the PDF Stream
        const file = new Blob(
            [document],
            { type: 'application/pdf' }
        );

        //Build a URL from the file
        const fileURL = URL.createObjectURL(file);

        //Open the URL on new Window
        window.open(fileURL);

    } catch(error) {
        console.log(error);
    }
}

The problem is that my PDF file is not displaying correctly. Only text inside the declared input fields is displayed:

PDF file on browser

0 Answers
Related