Use bootstrap - Githubissues

Nonobis commented 3 years ago

Hello,

I use your nuget to prepare html for a report then convert it to pdf. It's working but it's really ugly I want to add bootstrap in my razor view for customize html.

I have tried to add css / js like this withouh success

@section styles{ <link rel="Stylesheet" href="@Url.Content("~/lib/bootstrap/dist/css/bootstrap.min.css")" /> } @section scripts{ <script src="@Url.Content("~/lib/bootstrap/dist/js/bootstrap.bundle.min.js")" type="text/javascript"></script> }

but no success ...

Any idea ?

thanks by advance :)

soundaranbu commented 3 years ago

Hi @Nonobis, thanks for asking. I'll try this & let you know.

soundaranbu commented 3 years ago

@Nonobis Which library are you using to convert HTML to PDF?

Nonobis commented 3 years ago

I am on a project on NetCore 3.1, the lib is HtmlToPDFCore.

https://github.com/carloscds/HtmlToPDFCore

Nonobis commented 3 years ago

@soundaranbu : For a few reason, i have migrated to this library (more parameters), Haukcode.WkHtmlToPdfDotNet https://github.com/HakanL/WkHtmlToPdf-DotNet i don't known if it's changing something for your lib.

soundaranbu commented 3 years ago

It does work for me using the above library. As far as our library renders string out of cshtml, it's job is done.. After that it's in the hand of the HTML to PDF Converter library. Try this in your cshtml: Got it from https://dev.to/dshannon/create-a-responsive-bootstrap-invoice-21n6

<!doctype html>
<html lang="en">
<head>
    <title>Responsive Bootstrap Invoice Template</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Google fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">

    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- Override some Bootstrap CDN styles - normally you should apply these through your Bootstrap variables / sass -->
    <style>
        body {
            font-family: "Roboto", serif;
            font-size: 0.8rem;
            font-weight: 400;
            line-height: 1.4;
            color: #000000;
        }

        h1, h2, h4, h5 {
            font-weight: 700;
            color: #000000;
        }

        h1 {
            font-size: 2rem;
        }

        h2 {
            font-size: 1.6rem;
        }

        h4 {
            font-size: 1.2rem;
        }

        h5 {
            font-size: 1rem;
        }

        .table {
            color: #000;
        }

            .table td, .table th {
                border-top: 1px solid #000;
            }

            .table thead th {
                vertical-align: bottom;
                border-bottom: 2px solid #000;
            }

        @@page {
            margin-top: 2.5cm;
            margin-bottom: 2.5cm;
        }

        @@page :first {
            margin-top: 0;
            margin-bottom: 2.5cm;
        }
    </style>

</head>
<body>

    <div style="background-color: #000000; height: 10px;"></div>

    <div class="container-fluid pt-2 pt-md-4 px-md-5">

        <!-- Invoice heading -->

        <table class="table table-borderless">
            <tbody>
                <tr>
                    <td class="border-0">
                        <div class="row">
                            <div class="col-md text-center text-md-left mb-3 mb-md-0">
                                <img class="logo img-fluid mb-3" src="https://docamatic.s3-eu-west-1.amazonaws.com/assets/360_logo.png" style="max-height: 140px;" />
                                <br>

                                <h2 class="mb-1">360 Footwear</h2>
                                787 Brunswick, Los Angeles, CA 50028<br>
                                support@360footwear.co / 4444 555 555<br>
                                <strong>360footwear.co</strong>
                            </div>

                            <div class="col text-center text-md-right">

                                <!-- Dont' display Bill To on mobile -->
                                <span class="d-none d-md-block">
                                    <h1>Billed To</h1>
                                </span>

                                <h4 class="mb-0">Casey Williams</h4>

                                57 Parkway, 5th Floor<br />
                                New York, NY 10013<br />
                                casey@test.com<br />

                                <h5 class="mb-0 mt-3">14th June, 2018</h5>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>

        <!-- Invoice items table -->

        <table class="table">
            <thead>
                <tr>
                    <th>Summary</th>
                    <th class="text-right">Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <h5 class="mb-1">Pursuit Running Shoes</h5>
                        Men's Pursuit Running Shoes - 10/M
                    </td>
                    <td class="font-weight-bold align-middle text-right text-nowrap">$149.00 USD</td>
                </tr>
                <tr>
                    <td>
                        <h5 class="mb-1">Shelby Boots</h5>
                        Men's Shelby Leather Boots - 10/M
                    </td>
                    <td class="font-weight-bold align-middle text-right text-nowrap">$99.00 USD</td>
                </tr>
                <tr>
                    <td colspan="2" class="text-right border-0 pt-4"><h5>Total: $248.00 USD</h5></td>
                </tr>
        </table>

        <!-- Thank you note -->

        <h5 class="text-center pt-2">
            Thank you for your custom!
        </h5>
    </div>
</body>
</html>

console .csproj

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <OutputType>Exe</OutputType>
    <TargetFramework>netcoreapp3.1</TargetFramework>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Haukcode.WkHtmlToPdfDotNet" Version="1.3.0" />
    <PackageReference Include="Razor.Templating.Core" Version="1.4.0" />
  </ItemGroup>

  <ItemGroup>
    <ProjectReference Include="..\Razor.Templates\Razor.Templates.csproj" />
  </ItemGroup>

</Project>

in your console application

using System;
using System.Collections.Generic;
using Razor.Templating.Core;
using System.Threading.Tasks;
using WkHtmlToPdfDotNet;
using System.IO;

namespace Razor.Templating.Example.Invoice
{
    class Program
    {
        static async Task Main(string[] args)
        {
            var bootstrapHtml = await RazorTemplateEngine.RenderAsync("~/Bootstrap.cshtml");
            ConvertToPdf(bootstrapHtml);
            Console.ReadLine();
        }

        static void ConvertToPdf(string html)
        {
            var converter = new BasicConverter(new PdfTools());

            var doc = new HtmlToPdfDocument()
            {
                GlobalSettings = {
                    ColorMode = ColorMode.Color,
                    Orientation = Orientation.Portrait,
                    PaperSize = PaperKind.A4,
                },
                Objects = {
                    new ObjectSettings() {
                        HtmlContent =html                    }
                }
            };

            byte[] pdf = converter.Convert(doc);

            if (!Directory.Exists("Files"))
            {
                Directory.CreateDirectory("Files");
            }

            using (var stream = new FileStream(Path.Combine("Files", DateTime.UtcNow.Ticks.ToString() + ".pdf"), FileMode.Create))
            {
                stream.Write(pdf, 0, pdf.Length);
            }
        }
    }
}

Let's look at the generated PDF

I tried to convert the html of this page https://getbootstrap.com/docs/4.0/examples/grid/ Resulting PDF is here:

P.S: I got an error Qt: Could not initialize OLE (error 80010106) in the console, but still the PDF was created successfully. Unfortunately I didn't have much time to look into that. I'll leave that to you.

So it works! I'll try to add it under the RealWorldSamples folder whenever I get time. But I hope this helps for now. Thanks

Nonobis commented 3 years ago

Thank you, i will try your solution.

Nonobis commented 3 years ago

It's working. Thanks

soundaranbu / Razor.Templating.Core

Use bootstrap #14