Nested List in Html to Docx

Post a reply
Spire.Doc is a professional Word .NET library specifically designed for developers to create, read, write, convert and print Word document files. Get free and professional technical support for Spire.Doc for .NET, Java, Android, C++, Python.

Fri Dec 04, 2020 7:37 am

Hello. My company generates specific documents using html, and later convert them in Word or PDF. In one of my documents, i'm needed generate multi-level list. For example:

Code: Select all
<html class="no-js">
<head>
        <meta charset="utf-8">
   <meta http-equiv="x-ua-compatible" content="ie=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">
   <style>
      .document { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
      ol { counter-reset: item }
      li { display: block }
      li:before { content: counters(item, ".") " "; counter-increment: item }
   </style>      
</head>
<body>   
   <div class="text-justify document">
    <ol>
    <li>
        Line 1
        <ol>
        <li>Line 1.1</li>
        <li>Line 1.2</li>
   <li>Line 1.3</li>
   </ol>
    </li>
    <li>Line 2</li>
    <li>Line 3</li>
    </ol>
</div>
</body>
</html>


But instead
Code: Select all
1. Line 1
    1.1 Line 1.1
    1.2 Line 1.2
    1.3 Line 1.3
2. Line 2
3. Line 3


I always get
Code: Select all
1. Line 1
    1 Line 1.1
    2 Line 1.2
    3 Line 1.3
2. Line 2
3. Line 3


Can you help me, how i should change my styles for take right result?

IgorSukhov
 
Posts: 6
Joined: Tue Mar 10, 2020 12:21 am

Fri Dec 04, 2020 9:56 am

Hello,

Thanks for your inquiry!

I have made a test and did reproduce your issue. When converting your Html to Word or Pdf by MS Word, I got the same results as our product. According to the Html structure specification, I am afraid that you cannot get a Word or Pdf with the same multilevel list effect by changing the style in Html.

But our Spire.Doc supports changing the multilevel list of the document. Please refer to the following code.
Code: Select all
            Document doc = new Document();
            doc.LoadFromFile(@"E:\testdoc\test.html", FileFormat.Html, XHTMLValidationType.None);
            Section sec = doc.Sections[0];

            ListStyle listStyle = new ListStyle(doc, ListType.Numbered);
            listStyle.Name = "levelstyle";

            listStyle.Levels[0].PatternType = ListPatternType.Arabic;
            listStyle.Levels[0].NumberSufix = "";
            listStyle.Levels[0].CharacterFormat.FontName = "Arial";

            listStyle.Levels[1].NumberPrefix = "\x0000.";
            listStyle.Levels[1].NumberSufix = "";
            listStyle.Levels[1].PatternType = ListPatternType.Arabic;
            listStyle.Levels[1].CharacterFormat.FontName = "Arial";

            doc.ListStyles.Add(listStyle);

            foreach (Paragraph para in sec.Paragraphs)
            {
                para.ListFormat.ApplyStyle("levelstyle");
            }
            doc.SaveToFile("testHtml.pdf", FileFormat.PDF);
            doc.SaveToFile("testHtml.docx", FileFormat.Docx);

If you have any other problem, please feel free to contact us.

Sincerely,
Marcia
E-iceblue support team
User avatar

Marcia.Zhou
 
Posts: 858
Joined: Wed Nov 04, 2020 2:29 am

Sat Dec 05, 2020 12:11 pm

Can you explore about HTML structure specification? Becouse a lot of people use site w3.org/TR/CSS22/generate.html#scope[/url] (i'm not allow to post url) when try to create nested lists. As i know, it's offical specification. I think, your product use abstract syntax tree (or something same) to parse html. Why you cannot create this styles automatically and apply to document? It would be great otherwise i'm needed separate style classes between C# and CSS template. It will be terrible application architecture.

And for example, if i create styles in C# with name in your example "levelstyle". Why i can't use something like <ol class="levelstyle"> or <p class="levelstyle"> to apply for few elements.
Example is unuseable now, becouse it's going to break all paragraphs in document. How i can find only lists or one specific list? I should use mark or something else?
Code: Select all
foreach (Paragraph para in sec.Paragraphs)
{
    para.ListFormat.ApplyStyle("levelstyle");
}

IgorSukhov
 
Posts: 6
Joined: Tue Mar 10, 2020 12:21 am

Mon Dec 07, 2020 11:05 am

Hello,
Thanks for your message and sorry for the late reply as weekend.

The multilevel list you have generated in the Html is obtained by setting the “li:before” pseudo-element. Although the contents of pseudo-element control are the same as those of an element control, it is only element-based abstraction, so it does not really exist in the document. In this case, even if we open the Html directly through Word tool, the multilevel list inside it cannot be displayed. Kindly note that our Spire.Doc follows Microsoft Word standard. As MS Word does not support this feature, I am afraid that our Spire.Doc doesn't implement it.

Please refer to the following code to change number list style for specific lists.
Code: Select all
            Document doc = new Document();
            doc.LoadFromFile(@"E:\testdoc\test.html", FileFormat.Html, XHTMLValidationType.None);
            Section sec = doc.Sections[0];
            Body body = sec.Body;
            foreach (Paragraph para in body.Paragraphs)
            {
                if(para.DocumentObjectType == DocumentObjectType.Paragraph)
                {
                    if (para.ListFormat.ListLevelNumber == 1)
                    {
                        para.ListFormat.IsRestartNumbering = false;
                        para.ListFormat.CurrentListLevel.NumberPrefix = "\0.";
                        para.ListFormat.CurrentListLevel.NumberSufix = "";
                    }
                }
            }
            doc.SaveToFile("testHtml.pdf", FileFormat.PDF);
            doc.SaveToFile("testHtml.docx", FileFormat.Docx);

If you have any other problem, please feel free to contact us.

Sincerely,
Marcia
E-iceblue support team
User avatar

Marcia.Zhou
 
Posts: 858
Joined: Wed Nov 04, 2020 2:29 am

Tue Dec 08, 2020 5:13 am

Hello. Thank you for your description about pseudo-element. I agree that it's fair, that if word doesn't support somethings, your tool has same result. And i'm happy for description about how configurate list.

Now, i have another problem. Let's go to example.

Code: Select all

    <html class="no-js">
      <head>
         <meta charset="utf-8" />
         <meta http-equiv="x-ua-compatible" content="ie=edge">    <meta name="viewport" content="width=device-width, initial-scale=1" />
         <style>
            .document { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
            .div-text-indent {text-indent: 40px;}
            .document-padding-top {padding-top: 15px !important;}

            .text-center { text-align: center !important; }
            .text-right { text-align: right !important; }
            .text-justify { text-align: justify; }
            
            .font-weight-bold { font-weight: 700 !default }
            .header-font-weight-bold { font-family: Arial, Helvetica, sans-serif; font-size: 11pt; font-weight: 800 !default }
            
                .space-between { justify-content: space-between; display: flex; }

                .decoration {
               border-bottom: 1px solid;
               width: 100%;
               display: block;
            }

            ul {
               padding: 0;
               margin-left: 25px;
            }

            ul ul {
               padding: 0;
               margin-left: 25px;
            }

            li {
               padding: 0;
            }
         </style>
         <style></style>
      </head>
      <body>   

<div class="text-justify document">
   <table class="document">
      <tr>
         <td>
         </td>
         <td>
            <span class="header-font-weight-bold">
               RIGHT TO USE REFERENCE MATERIAL FOR MARKETING, SALES AND COMMUNICATIONS PURPOSES
            </span>
            <br />
         </td>
      </tr>
      <tr>
         <td>
            1. Other languages
         </td>
         <td>
            <span class="header-font-weight-bold">
               1. Use of Personal Information
            </span>
         </td>
      </tr>
      <tr>
         <td>
            1. Other languages
         </td>
         <td>
            <ul>
               <li>
                  I confirm that I consent to the use (including distribution and publishing), in whole or in part, of the attached reference material, including my statements, quotations, photograph(s) and video
                  materials with my appearance (whichever applies) (hereinafter <span class="header-font-weight-bold">"Reference Material"</span>) by Siemens Finance OOO, Siemens Financial Services GmbH,
                  subsidiaries of Siemens Financial Services GmbH and Siemens AG (hereinafter <span class="header-font-weight-bold">"Siemens Companies"</span>) as follows:
                  <ul>
                     <li>
                        in the Siemens group reference customer database
                     </li>
                     <li>
                        for marketing, sales and communications purposes (e.g. marketing collateral and publications, including digital media such as Internet and Intranet (including Social Media platforms) and print media)
                     </li>
                  </ul>
               </li>
               <li>
                  Should the transferred photo- and video materials within the Reference Material be subject of my copyrights, I (copyright holder) assign to the Siemens Companies (transferee) the exclusive right
                  regarding the attached photo- and video materials without charge.
               </li>
               <li>
                  I additionally confirm that the attached Reference Material is accurate, and that I understand that my name may, but not necessarily will be mentioned in connection with the Reference Material.
               </li>
               <li>
                  I confirm that these rights shall be freely granted to the Siemens Companies. If required I also authorize the Siemens Companies to exercise any copyright claims against third parties in their own
                  name and on their own behalf.
               </li>
            </ul>
         </td>
      </tr>
   </table>
</div>
</body>
</html>



If i check this html in word, i see bullets, but if i generate this html using spire, bullets dissappear. Main reason is a style "padding: 0;" on "li" element. Is it bug?

IgorSukhov
 
Posts: 6
Joined: Tue Mar 10, 2020 12:21 am

Tue Dec 08, 2020 9:11 am

Hello,

Thanks for your reply!

I have reproduced your issue and logged it in our issue tracking system with the ticket SPIREDOC-5302 for further investigation.

We will let you know if there is any update. Sorry for the inconvenience caused. If you have any other question, please feel free to contact us.

Sincerely,
Marcia
E-iceblue support team
User avatar

Marcia.Zhou
 
Posts: 858
Joined: Wed Nov 04, 2020 2:29 am
Post a reply

Return to Spire.Doc