基于JavaScript实现TCPDF兼容的嵌套有序列表编号方案求助

I've run into similar issues with TCPDF's limited CSS support for nested lists before—here's a straightforward JavaScript function that will generate the hierarchical numbering you need by directly inserting the numbers into your list items:

function generateNestedListNumbering() {
    // Recursive function to process each list item
    function processListItem(liElement, parentNumber, itemIndex) {
        // Generate the current item's full number
        const currentNumber = parentNumber ? `${parentNumber}${itemIndex}` : `${itemIndex}`;
        
        // Create a span to hold the number (easier to style if needed)
        const numberSpan = document.createElement('span');
        numberSpan.textContent = `${currentNumber}. `;
        numberSpan.style.marginRight = '8px'; // Optional: add space between number and text
        
        // Insert the number at the start of the list item
        liElement.insertBefore(numberSpan, liElement.firstChild);
        
        // Check for nested ordered lists and process them
        const nestedOl = liElement.querySelector('ol');
        if (nestedOl) {
            const nestedItems = nestedOl.querySelectorAll('li');
            nestedItems.forEach((nestedLi, idx) => {
                // Pass the current number + dot as the parent number for the next level
                processListItem(nestedLi, `${currentNumber}.`, idx + 1);
            });
        }
    }

    // Start with all top-level ordered lists (not nested inside other list items)
    const topLevelLists = document.querySelectorAll('ol:not(li > ol)');
    
    topLevelLists.forEach(list => {
        const listItems = list.querySelectorAll('li');
        listItems.forEach((item, index) => {
            // Process top-level items with empty parent number and 1-based index
            processListItem(item, '', index + 1);
        });
    });
}

// Call the function to apply numbering
generateNestedListNumbering();

How It Works: #

• Recursion: The processListItem function handles each level of nesting by passing along the parent's numbering (e.g., "2." for children of the second top-level item).
• 1-Based Indexing: List items are numbered starting at 1, which matches standard ordered list behavior.
• DOM Modification: It inserts a span with the generated number at the beginning of each <li> element—this ensures TCPDF will render the number as plain text, no CSS required.
• Handles Arbitrary Nesting: Works for any depth of nested lists (1.1.1, 1.1.2, etc.).

Example Before/After: #

Original HTML:

<ol>
    <li>Main Item 1
        <ol>
            <li>Subitem 1.1</li>
            <li>Subitem 1.2
                <ol>
                    <li>Sub-subitem 1.2.1</li>
                </ol>
            </li>
        </ol>
    </li>
    <li>Main Item 2</li>
</ol>

After Running the Function:

The DOM will be modified to look like this (simplified):

<ol>
    <li><span>1. </span>Main Item 1
        <ol>
            <li><span>1.1. </span>Subitem 1.1</li>
            <li><span>1.2. </span>Subitem 1.2
                <ol>
                    <li><span>1.2.1. </span>Sub-subitem 1.2.1</li>
                </ol>
            </li>
        </ol>
    </li>
    <li><span>2. </span>Main Item 2</li>
</ol>

Using with TCPDF: #

1. Run this JavaScript function on your HTML page (or in a headless browser like Puppeteer if you're generating the HTML server-side) to apply the numbering.
2. Capture the modified HTML and pass it to TCPDF's writeHTML() method—TCPDF will render the numbers correctly since they're now part of the text content.

内容的提问来源于stack exchange，提问作者BSants