在 Asp.net 核心中使用 JsReport 将 Html 导出为 Pdf答案

【问题标题】：Export Html to Pdf using JsReport in Asp.net core在 Asp.net 核心中使用 JsReport 将 Html 导出为 Pdf
【发布时间】：2018-10-02 19:51:26
【问题描述】：

我有一个带有图像、表格和一些带有 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？还是我在这里转换过程中遗漏了什么？

【问题讨论】：

标签： jsreport

【解决方案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

【讨论】：

你能解释一下为什么不推荐使用 bootstrap 打印静态 pdf 吗？
我尝试了这段代码，但它没有与图像一起打印。