Export Html to Pdf using JsReport in Asp.net core

Question

Export Html to Pdf using JsReport in Asp.net core

2.8k Views Asked by Rasik At 05 April 2025 at 05:21

I have a html page with images, tables and some styling with Bootstrap 4. I tried to convert the pages to pdf using the JsReportMVCService, the pdf doesnot load with the proper css class from bootstrap.

HTML CONTENT

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>WeekelyReport</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
    <div class="jumbotron">
        <h1> Hello John Doe,</h1>
        <p>
            This is a generic email about something.<br />
            <br />
        </p>
    </div>
</body>
</html>

ASP.NET CORE IMPLEMENTATION

var generatedFile = await GeneratePDFAsync(htmlContent);
File.WriteAllBytes(@"C:\temp\hello.pdf", generatedFile);

async Task<byte[]> GeneratePDFAsync(string htmlContent)
{
    var report = await JsReportMVCService.RenderAsync(new RenderRequest()
    {
        Template = new Template
        {
            Content = htmlContent,
            Engine = Engine.None,
            Recipe = Recipe.ChromePdf
        }
    });

    using (var memoryStream = new MemoryStream())
    {
        await report.Content.CopyToAsync(memoryStream);
        return memoryStream.ToArray();
    }
}

How my Pdf Looks after the conversion to PDF.

It is possible to convert to pdf with the same bootstrap 4 layout? or am i missing something during the conversion here?

Original Q&A

There are 1 best solutions below

**Jan Blaha** · Answer 1

The pdf printing uses print media type and the bootstrap has quite different styles for printing. This causes that the pdf looks different than html, but it looks the same as you would print it. I would generally not recommend using responsive css framework as bootstrap for printing static pdf, but it is of course your choice.

To make your example looking the same on pdf you just need to change the media type on the chrome settings.

var report = await JsReportMVCService.RenderAsync(new RenderRequest()
    {
        Template = new Template
        {
            Content = htmlContent,
            Engine = Engine.None,
            Recipe = Recipe.ChromePdf,
            Chrome = new Chrome {
              MediaType = MediaType.Screen,
              PrintBackground = true
            }
        }
});

make sure you have the latest [email protected]

Export Html to Pdf using JsReport in Asp.net core

There are 1 best solutions below

Related Questions in JSREPORT

Trending Questions

Popular # Hahtags

Popular Questions