Экспорт HTML в Pdf с использованием JsReport в ядре Asp.net - PullRequest
Новая
       14

Экспорт HTML в Pdf с использованием JsReport в ядре Asp.net

0 голосов
/ 01 октября 2018

У меня есть html-страница с изображениями, таблицами и некоторыми стилями с помощью Bootstrap 4. Я попытался преобразовать страницы в pdf, используя JsReportMVCService, pdf не загружается с подходящим классом 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.

enter image description here

Можно ли конвертировать в pdf с таким же макетом начальной загрузки 4?или я что-то упускаю во время конвертации здесь?

1 Ответ

0 голосов
/ 02 октября 2018

Для печати в формате 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

...