This is a migrated thread and some comments may be shown as answers.

Exporting from HTML

6 Answers 715 Views
PdfProcessing
This is a migrated thread and some comments may be shown as answers.
Luca B
Top achievements
Rank 1
Luca B asked on 12 Oct 2018, 10:56 AM

Hi everyone, 

I am trying to convert the following quite simple HTMl to PDF

<!DOCTYPE html>
<html>
<head>
    <title>Configuration</title>
    <meta charset="utf-8" />
    <style type="text/css">
        body{
            font-family:Verdana,Arial;
            color:black
        }
        th{
            background-color: silver
        }
        table {
            width: 100%;
            border: solid 1px gray;
            margin-bottom: 32px
        }
        td {
            border-top: solid 1px gray
        }
    </style>
</head>
<body>
    <hr />
    <h2>Offer Configuration</h2>
    <div style="width:80%;margin-left:auto;margin-right:auto">
        <table align="center" cellpadding="0" cellspacing="0" style="width:600px">
            <tr>
                <th>Document</th>
                <th>Date</th>
                <th>Sales Person</th>
            </tr>
        </table>
        <br />
        <table align="right" cellpadding="0" cellspacing="0" style="width:30%;float:right">
            <tr>
                <th>Total</th>
            </tr>
            <tr>
                <td>${PL_TOTAL}</td>
            </tr>
        </table>
        <br />
    </div>
    <div id="divFooter">
         
    </div>
</body>
</html>

 

This is the code I am using

Dim htmlDocument = ProviderHtml.Import(My.Resources.Resource1.order)
Using output As New FileStream("c:\temp\out.pdf", FileMode.Create)
   ProviderPdf.Export(htmlDocument, output)
End Using
Process.Start("c:\temp\out.pdf")

 

Problem is, the output is very different from source the HTML:

- the HR arenot displayed

- the tables width are ignored

Note that pasting the same HTML here https://demos.telerik.com/aspnet-ajax/editor/examples/import-export/pdf-export/defaultcs.aspx generates an invalid PDF

Is there anything I am missing?

Thanks

6 Answers, 1 is accepted

Sort by
0
Luca B
Top achievements
Rank 1
answered on 16 Oct 2018, 09:38 AM

Anyone?

Thanks

0
Polya
Telerik team
answered on 16 Oct 2018, 02:51 PM
Hello Luca,

The <hr> html tags are currently not imported with our WordsProcessing HtmlFormatProvider. We have a feature request logged for this in our Feedback Portal where you can vote for it and track its status: http://feedback.telerik.com/Project/184/Feedback/Details/226498

Regarding the table widths, could you elaborate what is the expected result? Comparing the widths of the tables in Microsoft Excel and the exported PDF document it appears that the widths are consistent.

Regards,
Polya
Progress Telerik

0
Luca B
Top achievements
Rank 1
answered on 16 Oct 2018, 03:14 PM

Hello Polya, thanks for the reply.

The HR thing is weird, if you put an HR in your PDF Export demo for the RadEditor, it is exported. It's ugly, but it's there. But I managed to use a DIV with borders, so it's not a big issue.

The table issue om the other hand is quite simple: if you put a 100% width the tables do not span the entire page width, also the float:right style is ignored.

Can I use CSS class as in my example above? Or should I use inline styles?

Is float:right not supported?

Thanks

0
Polya
Telerik team
answered on 19 Oct 2018, 11:49 AM
Hi Luca,

I've compared again the result when importing the provided HTML in Microsoft Word and the produced PDF after exporting the HTML with our WordsProcessing library's PdfFormatProvider. The widths of the tables look the same and we strive to achieve consistency of our WordsProcessing library with Microsoft Word (not a web browser), because our product is designed to work with the OpenXml format. That said, because I am unable to reproduce a width discrepancy at our side, I will again kindly ask for more details on where exactly you are setting the 100% width - the div, the first table, the second table or in the styles in <head>; and how are you setting the width - is it through the inline style?

Regarding the float CSS property, indeed it is currently unsupported. Because the html and flow document models are very different, sometimes properties or tags in the first do not have a logical representation in the other. This is the case with the float property, which determines the floating/position of an element inside its parent container. This property does not have an analog in the flow document model, thus it is currently skipped while importing.

Regards,
Polya
Progress Telerik

0
LTA
Top achievements
Rank 1
answered on 20 Nov 2020, 02:44 PM

Hi,

We can set border like this.

<div style="max-height:1px; background-color: #000; font-size: 1px">.</div>

 

Thanks,

Aravindh

0
Dimitar
Telerik team
answered on 24 Nov 2020, 07:49 AM

Hello Aravindh,

Thank you for sharing your solution with the community. I have updated your Telerik points. 

Regards,
Dimitar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
PdfProcessing
Asked by
Luca B
Top achievements
Rank 1
Answers by
Luca B
Top achievements
Rank 1
Polya
Telerik team
LTA
Top achievements
Rank 1
Dimitar
Telerik team
Share this question
or