Question

我有一个包含图像，表格和一些带有Bootstrap 4样式的html页面。我尝试使用JsReportMVCService将页面转换为pdf，pdf无法从bootstrap加载正确的css类。

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();
    }
}

转换为PDF后我的Pdf的外观。

是否可以使用相同的bootstrap 4布局转换为pdf？还是我在转换过程中错过了什么？

Answer 1

pdf打印使用print介质类型，并且引导程序具有完全不同的打印样式。这会导致pdf看起来与html不同，但是看起来与您将其打印的相同。我通常不建议使用响应式CSS框架作为打印静态pdf的引导程序，但这当然是您的选择。

要使您的示例在pdf上看起来相同，只需更改Chrome设置中的媒体类型。

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
            }
        }
});

确保您拥有最新的jsreport.Types@2.2.2

使用Asp.net Core中的JsReport将HTML导出到Pdf

1 个答案: