how to use css in razorpdf

Question

I'm using mvc4,here I'm using razorpdf to convert my view to pdf, but I'm getting an error - Unable to cast object of type iTextSharp.text.Paragraph to type iTextSharp.text.Table.

This is the sample code I'm using:

    @{

    Layout = "~/Views/Shared/_PdfLayout.cshtml";
}
<html>
    <body>
        <table border="1" width='500' bordercolor="RED"><tr><td colspan="3" bgcolor="LightGreen" align="center" valign="top">SSLC Marks Sheet 2013</td></tr></table></body>
</html>

Set Layout=null in your example. Otherwise the Razor Layoutengine will generate and again... Or remove tags from your view. — Obiwan007, Sep 03 '13 at 10:50

score 7 · Answer 1 · edited Oct 24 '13 at 18:05

Since your code is using the _PdfLayout.chtml the code needs to be written using iTextSharp in an xml format and not html. remove the body tags, change the <tr> to <row>, change the <td> to <cell> and then use <chunk> your text here </chunk> to hold the text inside each cell. Here is an example:

<paragraph style="font-family:Tahoma;font-size:18;font-style:normal;"&
    <chunk style="font-weight:bold;">Customer Address Report</chunk>
</paragraph>
<table width="100%" cellpadding="0" cellspacing="0.5" widths="16;12;12;12;12;12;12;12" borderwidth="1.0" left="true" right="true" top="true" bottom="true" red="0" green="0" blue="0">
    <row>
        <cell borderwidth="0.5" left="true" right="true" top="true" bottom="true" horizontalalign="Center">
            <chunk style="font-size:10;font-weight:bold;">Customer Name</chunk>
        </cell>
        <cell borderwidth="0.5" left="true" right="true" top="true" bottom="true" horizontalalign="Center">
            <chunk style="font-size:10;font-weight:bold;">Address 1</chunk>
        </cell>
        <cell borderwidth="0.5" left="true" right="true" top="true" bottom="true" horizontalalign="Center">
            <chunk style="font-size:10;font-weight:bold;" align="Center">Address 2</chunk>
        </cell>
        <cell borderwidth="0.5" left="true" right="true" top="true" bottom="true" horizontalalign="Center">
            <chunk style="font-size:10;font-weight:bold;" align="Center">Address 3</chunk>
        </cell>
        <cell borderwidth="0.5" left="true" right="true" top="true" bottom="true" horizontalalign="Center">
            <chunk style="font-size:10;font-weight:bold;" align="Center">City</chunk>
        </cell>
        <cell borderwidth="0.5" left="true" right="true" top="true" bottom="true" horizontalalign="Center">
            <chunk style="font-size:10;font-weight:bold;" align="Center">State</chunk>
        </cell>
        <cell borderwidth="0.5" left="true" right="true" top="true" bottom="true" horizontalalign="Center">
            <chunk style="font-size:10;font-weight:bold;" align="Center">Postal Code</chunk>
        </cell>
        <cell borderwidth="0.5" left="true" right="true" top="true" bottom="true" horizontalalign="Center">
            <chunk style="font-size:10;font-weight:bold;" align="Center">Country</chunk>
        </cell>
    </row>
    @foreach (var item in Model)
    {
        <row>
            <cell borderwidth="0.5" left="true" right="true" top="true" bottom="true">
                <chunk style="font-size:10;font-weight:normal;">@Html.DisplayFor(modelItem => item.customerName)</chunk>
            </cell>
            <cell borderwidth="0.5" left="true" right="true" top="true" bottom="true">
                <chunk style="font-size:10;font-weight:normal;">@Html.DisplayFor(modelItem => item.addr1)</chunk>
            </cell>
            <cell borderwidth="0.5" left="true" right="true" top="true" bottom="true">
                <chunk style="font-size:10;font-weight:normal;">@Html.DisplayFor(modelItem => item.addr2)</chunk>
            </cell>
            <cell borderwidth="0.5" left="true" right="true" top="true" bottom="true">
                <chunk style="font-size:10;font-weight:normal;">@Html.DisplayFor(modelItem => item.addr3)</chunk>
            </cell>
            <cell borderwidth="0.5" left="true" right="true" top="true" bottom="true">
                <chunk style="font-size:10;font-weight:normal;">@Html.DisplayFor(modelItem => item.city)</chunk>
            </cell>
            <cell borderwidth="0.5" left="true" right="true" top="true" bottom="true">
                <chunk style="font-size:10;font-weight:normal;">@Html.DisplayFor(modelItem => item.state)</chunk>
            </cell>
            <cell borderwidth="0.5" left="true" right="true" top="true" bottom="true">
                <chunk style="font-size:10;font-weight:normal;">@Html.DisplayFor(modelItem => item.postalCode)</chunk>
            </cell>
            <cell borderwidth="0.5" left="true" right="true" top="true" bottom="true">
                <chunk style="font-size:10;font-weight:normal;">@Html.DisplayFor(modelItem => item.country)</chunk>
            </cell>
        </row>
    }
</table>

what are the replacements for other html elements like div and span? — NMathur, Aug 28 '14 at 04:32

score 0 · Answer 2 · answered Aug 19 '14 at 08:36

im sitting with the same problem, it seems that u cant use traditionally used css in ur html contents... only some inline styles settings work.. here is an example of what i did to get some styling in my generated table....

And by the way, my Layout is set to null (Layout = null) or else it wont work... i did it this way because i dont have knowledge in making an table with syntax

   <itext creationdate="@DateTime.Now.ToString()" producer="RazorPDF">
    <table>
        <tr>
            <th align="center">@Model.CampaignName</th>
        </tr>
    </table>
    <h4>@ViewBag.CampaignName</h4>

    <table border="1" cellpadding="3">
        <thead>
            <tr>
                <td colspan="5" align="center">
                    <strong>Delivery List</strong>
                </td>
            </tr>
            <tr>
                <th>@Html.DisplayNameFor(m => m.DeliveryList.FirstOrDefault().ShopName)</th>
                <th width="35%">@Html.DisplayNameFor(m => m.DeliveryList.FirstOrDefault().MediaTypeName)</th>
                <th>@Html.DisplayNameFor(m => m.DeliveryList.FirstOrDefault().Count)</th>
                <th>@Html.DisplayNameFor(m => m.DeliveryList.FirstOrDefault().Width)</th>
                <th>@Html.DisplayNameFor(m => m.DeliveryList.FirstOrDefault().Height)</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.DeliveryList)
            {
                <tr>
                    <th>@Html.DisplayFor(m => item.ShopName) - @item.ShopAddress</th>
                    <td>@Html.DisplayFor(m => item.MediaTypeName)</td>
                    <th>@Html.DisplayFor(m => item.Count)</th>
                    <td>@Html.DisplayFor(m => item.Width)</td>
                    <td>@Html.DisplayFor(m => item.Height)</td>
                </tr>
            }
        </tbody>
    </table>
    <br />
    <table border="1" cellpadding="3">
        <thead>
            <tr>
                <td colspan="5" align="center">
                    <strong>Production List</strong>
                </td>
            </tr>
            <tr>
                <th>@Html.DisplayNameFor(m => m.ProductionList.FirstOrDefault().MediaTypeName)</th>
                <th width="45%">@Html.DisplayNameFor(m => m.ProductionList.FirstOrDefault().Comments)</th>
                <th>@Html.DisplayNameFor(m => m.ProductionList.FirstOrDefault().CountAll)</th>
                <th>@Html.DisplayNameFor(m => m.ProductionList.FirstOrDefault().Width)</th>
                <th>@Html.DisplayNameFor(m => m.ProductionList.FirstOrDefault().Height)</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.ProductionList)
            {
                <tr>
                    <td>@Html.DisplayFor(m => item.MediaTypeName)</td>
                    <th width="30%">@Html.DisplayFor(m => item.Comments)</th>
                    <th>@Html.DisplayFor(m => item.CountAll)</th>
                    <th>@Html.DisplayFor(m => item.Width)</th>
                    <th>@Html.DisplayFor(m => item.Height)</th>

                </tr>
            }
        </tbody>
    </table>
</itext>

how to use css in razorpdf

2 Answers2