Search code examples
c#pdfpdf-generationhtml-to-pdfhiqpdf

Html to pdf with images using hiqpdf


I am converting a html with images and css files using HiQPdf 8.0. I have done it lots of times in MVC 4. Now I am working under MVC 5 and HiQPdf 8.0 and the problem is HiQPdf 8.0 is not loadin external files like css files and images. I solved the issue with css files by writhing the styles in a style tag in the page but do not know how to handle images. Here is my solution:

byte[] pdf = RenderPdf(contractId.Value, personId.Value, addressId.Value, transportId.Value, peacockeryNumber, peacockeryDate);
System.IO.File.WriteAllBytes(path, pdf);

public byte[] RenderPdf(int contractId, int personId, int addressId, int transportId, string peacockeryNumber, string peacockeryDate)
{
    PdfPageViewModel model = new PdfPageViewModel();
    model.Contract = contractRepo.GetContract(contractId);
    model.Person = personRepo.GetPerson(personId);
    model.Supplier = supplierRepo.GetSupplier(model.Contract.SupplierCode, 1);
    model.Customer = customerRepo.GetCustomer(model.Contract.CustomerCode);
    model.Address = customerRepo.GetAddress(addressId);
    model.Transport = transportRepo.Detail(transportId);
    model.Header = settingRepo.GetSetting(Model.Settings.SettingType.Header);
    model.FooterAddress = settingRepo.GetSetting(Model.Settings.SettingType.Address);
    model.Sign = settingRepo.GetSetting(Model.Settings.SettingType.Sign);
    model.Stamp = settingRepo.GetSetting(Model.Settings.SettingType.Stamp);
    model.PeacockeryDate = peacockeryDate;
    model.PeacockeryNumber = peacockeryNumber;
    string htmlToConvert = RenderPdfAsString("HtmlPdf", model);
    String thisPageUrl = this.ControllerContext.HttpContext.Request.Url.AbsoluteUri;
    String baseUrl = thisPageUrl.Substring(0, thisPageUrl.Length - "Home/ConvertThisPageToPdf".Length);
    HtmlToPdf htmlToPdfConverter = new HtmlToPdf();
    htmlToPdfConverter.HiddenHtmlElements = new string[] { "#convertThisPageButtonDiv" };
    byte[] pdfBuffer = htmlToPdfConverter.ConvertHtmlToMemory(htmlToConvert, baseUrl);
    byte[] b = pdfBuffer;
    return b;
}

public string RenderPdfAsString(string viewName, object model)
{
    PdfPageViewModel pdfPage = (PdfPageViewModel)model;
    StringWriter stringWriter = new StringWriter();
    ViewEngineResult viewResult = ViewEngines.Engines.FindView(ControllerContext, viewName, null);
    ViewContext viewContext = new ViewContext(
    ControllerContext,
    viewResult.View,
    new ViewDataDictionary(model),
    new TempDataDictionary(),
    stringWriter
    );
    viewResult.View.Render(viewContext, stringWriter);
    return stringWriter.ToString();
}

And here is the HtmlPdf view:

<body id="prt-body" style="font-family: 'B Nazanin'">
    <div class="prt-container">
        <header id="prt-header">
            <div id="prt-header-logo">
                <img src="~/Images/logo.png" />
            </div>
            <ul id="prt-header-information">
                <li><span>تاریخ: </span>
                    <label>@Paristan.Broker.UI.Components.PersianDate.GetDate(DateTime.Now)</label></li>
                <li><span>شماره: </span>
                    <label>93323448/1</label></li>
                <li><span>پیوست:</span><label>......................</label></li>
            </ul>
            <div class="clear"></div>
        </header>
        <div id="prt-main">
            <ul id="prt-main-information">
                <li><span>@Model.Person.Title</span><label></label></li>
                <li><span>@Model.Person.Name</span><label></label></li>
                <li><span>@Model.Supplier.Name</span></li>
            </ul>
            <div class="prt-main-message">@Html.Raw(Model.Header.Value.Replace("#Date", Model.Contract.ContractDate))</div>
            <ul id="prt-main-tables">
                <li>
                    <label>1) مشخصات کالا: </label>
                    <table class="prt-fiveTD">
                        <tr>
                            <th>نام محصول</th>
                            <th>گرید</th>
                            <th>تاریخ قرار داد</th>
                            <th>شماره قرار داد</th>
                            <th>شماره قرار داد جز</th>
                        </tr>
                        <tr>
                            <td>@Model.Contract.CommercialName</td>
                            <td>@Model.Contract.ProductSymbol</td>
                            <td>@Model.Contract.ContractDate</td>
                            <td>@Model.Contract.ContractNumber</td>
                            <td>@Model.Contract.ComponentNumber</td>
                        </tr>
                    </table>
                </li>
                <li>
                    <label>2) مشخصات خریدار: </label>
                    <table class="prt-fourTD">
                        <tr>
                            <th>نام خریدار</th>
                            <th>کدشناسنامه پتروشیمی</th>
                            <th>کد اقتصاد</th>
                            <th>شماره ثبت / محل ثبت</th>
                        </tr>
                        <tr>
                            <td>@Model.Customer.Name</td>
                            <td>@Model.Customer.PetroChemicalCode</td>
                            <td>@Model.Customer.EconomyCode</td>
                            <td>@Model.Customer.RegisterLocation/@Model.Customer.RegisterNumber</td>
                        </tr>
                    </table>
                    <table class="prt-fourTD">
                        <tr>
                            <th>کدشناسنامه ملی</th>
                            <th>کد پستی</th>
                            <th>تلفن</th>
                            <th>نام نماینده / تلفن نماینده</th>
                        </tr>
                        <tr>
                            <td>@Model.Customer.CodeMelli</td>
                            <td>@Model.Customer.PostalCode</td>
                            <td>@Model.Customer.PhoneNumber</td>
                            <td>@Model.Customer.DelegacyPhoneNumber/@Model.Customer.DelegacyName</td>
                        </tr>
                    </table>
                    <table class="prt-twoTD">
                        <tr>
                            <th>آدرس</th>
                        </tr>
                        <tr>
                            <td>@Model.Customer.Address</td>
                        </tr>
                    </table>
                </li>
                <li>
                    <label>3) مشخصات قرار داد (ارقام با ریال): </label>
                    <table class="prt-fiveTD">
                        <tr>
                            <th>نوع معامله</th>
                            <th>حجم (کیلوگرم)</th>
                            <th>قیمت واحد</th>
                            <th>مبلغ کل خرید</th>
                            <th>کارمزد فروش</th>
                        </tr>
                        <tr>
                            @{double totalAmount = int.Parse(Model.Contract.Amount) * int.Parse(Model.Contract.Price);
                              double wage = totalAmount * 0.00278;
                              double settlementAmount = totalAmount * 0.99722;
                              double tax = totalAmount * 0.08;}
                            <td>@Model.Contract.ContractType</td>
                            <td>@Model.Contract.Amount</td>
                            <td>@Model.Contract.Price</td>
                            <td>@totalAmount</td>
                            <td>@wage</td>
                        </tr>
                    </table>
                    <table class="prt-fourTD">
                        <tr>
                            <th>مبلغ واریز به حساب فروشنده</th>
                            <th>مالیات بر ارزش افزوده معامله</th>
                            <th>شماره فیش واریزی vat</th>
                            <th>تاریخ فیش واریز vat</th>
                        </tr>
                        <tr>
                            <td>@settlementAmount</td>
                            <td>@tax</td>
                            <td>@Model.PeacockeryNumber</td>
                            <td>@Model.PeacockeryDate</td>
                        </tr>
                    </table>
                </li>
                <li>
                    <label>4) پیمانکار حمل: </label>
                    <table class="prt-twoTD">
                        <tr>
                            <th>نام پیمانکار</th>
                            <th>کد پیمانکار</th>
                        </tr>
                        <tr>
                            <td>@Model.Transport.Name</td>
                            <td>@Model.Transport.TransportCode</td>
                        </tr>
                    </table>
                </li>
                <li>
                    <label>5) آدرس محل تخلیه: </label>
                    <table class="prt-oneTD">
                        <tr>
                            <th>آدرس مقصد (تخلیه)</th>
                        </tr>
                        <tr>
                            <td>@Model.Address.EvacuationAddress</td>
                        </tr>
                    </table>
                </li>
                <li>
                    <label>6) توضیحات: خوانده شده از فایل معاملات </label>
                </li>
            </ul>
        </div>
        <footer id="prt-footer">
            <div id="prt-footer-img">
                <img src="Files/Sign/@Model.Sign.Value" />
                <img src="Files/Stamp/@Model.Stamp.Value" />
            </div>
            <div id="prt-footer-address">@Html.Raw(Model.FooterAddress.Value)</div>
        </footer>
        <div class="clear"></div>
    </div>
</body>

But there is some empty boxes instead of the images in the output pdf. Is it MVC 5 issue with HiQPdf or something else is going wrong?

Update

I tried it in MVC 4 and .Net 4 and 4.5 and it is not working any more. I have used from it as the same way before and nothing were wrong but now its not working.


Solution

  • Found some documentation you might enjoy here

    The images and styles are missing from the PDF document generated by converter and the scripts are not executed because these elements are referenced by relative URLs in the HTML code I convert. How can I give a base URL to be used by converter to resolve these elements?

    The methods to convert a HTML code of the HtmlToPdf, HtmlToImage and HtmlToSvg classes and the constructors of the PdfHtml and PdfHtmlImage classes have a baseUrl parameter that can be used by the HiQPdf HTML converters to resolve the relative URLs found in the HTML code you convert.

    For example, if an image is referenced in the HTML code you convert with and the image can be accessed from the http://www.example.com/Images/image.png fully qualified URL, then you have to set http://www.example.com/ as base URL in your application code. Similar for the style and script files referenced in the HTML code you convert.

    so it looks like youll have to use the fully qualified names to get it to work