HTML content to PDF issue

Aspose.PDF Product Family
,
1

I have HTML content as a string that I need to convert into a PDF and download when the export button is clicked. The exported file has some issues. I am adding screenshots for reference. Please check and provide the best solution as soon as possible.
Candidate_DueDiligenceTest.pdf (480.0 KB)

…screen shots
issue 2. .vertically printed but in page have horizonally format in 4 columns
image.png (54.4 KB)

issue 2. printed dropdown and other input like this
image.png (60.3 KB)

2

@amolgaikwad

Can you please provide more details about the code you are using to convert HTML content to PDF and specify the issues you are encountering?

3

Blazorcomponent.razor

string htmlContent = await BlzorRenderer!.RenderComponent
(new() {
{ nameof(TestCandidatePDF.CandidateRecord), “TestBusinessJustification” },
{ nameof(TestCandidatePDF.CandidateId), CandidateId },
{ nameof(TestCandidatePDF.CandidateWorkflowSteps), WorkflowStep },
{ nameof(TesCandidatePDF.AssignedRelationships), AssignedRelationships}
});

byte[] pdfBytes = htmlContent.GeneratePDF();
await js!.InvokeVoidAsync(“downloadPDF”, “TestCandidate_BusinessJustification.pdf”, “application/pdf”, pdfBytes);

======================================
cs file…

using Aspose.Pdf;
namespace Deloitte.APT.UI;

public static class PDFGenerator
{
public static byte[] GeneratePDF(this string htmlContent)
{

    Document pdfDocument = new Document();
    pdfDocument.PageInfo.Margin = new MarginInfo(0, 0, 0, 0);

    Page page = pdfDocument.Pages.Add();
    HtmlFragment htmlFragment = new HtmlFragment(htmlContent)
    {
        Margin = new MarginInfo(0, 0, 0, 0),
        HorizontalAlignment = HorizontalAlignment.Left,
        VerticalAlignment = VerticalAlignment.Top
    };

    page.Paragraphs.Add(htmlFragment);       

    using (MemoryStream stream = new MemoryStream())
    {
        pdfDocument.Save(stream);
        return stream.ToArray();

    }
}

}

4

@amolgaikwad

Seems like the CSS styling is not applied to the HTML while exporting to PDF document. If possible, can you please provide the HTML string in .zip format so that we can test the scenario in our environment and address it accordingly?

5

Hi @asad.ali
I have attached the HTML content of two different pages in a zip file as a string. Please have a look and let me know as soon as possible

6

@amolgaikwad

Below are the style sheets referred in these files which are missing in the resources. You need to specify the path to these resources as well during conversion:

<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="Deloitte.APT.UI.styles.css">
<link rel="stylesheet" href="_content/Deloitte.APT.UI.SharedComponents/dds-styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="telerik/custom-telerik.css">
<link rel="stylesheet" href="CandidatePDF/candidatePDF.css">

Sample code:

string html = File.ReadAllText(dataDir + "candijusti.html");

var byteArray = Encoding.UTF8.GetBytes(html);
using (var inStream = new MemoryStream(byteArray))
{
    var options = new HtmlLoadOptions("Path to Resources e.g. www.xyz.com/resources")
    {
        // set Print or Screen mode
        HtmlMediaType = HtmlMediaType.Print,
        IsEmbedFonts = true,
        IsRenderToSinglePage = true,
        PageInfo = new PageInfo() { Margin = new MarginInfo(0, 0, 0, 0), Width = PageSize.A4.Height, Height = PageSize.A4.Width }
    };

    using (var document = new Document(inStream, options))
    {
        //document.Flatten();
        document.Save(dataDir + "candijusti.pdf");
    }
}
7

still not working could you please suggest alternative way

8

@amolgaikwad

If you can export your webpages with embedded or inline CSS, it will be easy to export them into PDF via Aspose.PDF because your resources are in different places. Another option could be to place all resources at one place and then generate PDF using HtmlLoadOptions. Can you please provide HTML with all resources so that we can view them in browser with all styles applied?