privateOmega/html-to-docx

How to preserve border-bottom without table

Opened this issue · 0 comments

jjikkobro commented

Hello, I am currently exploring various libraries to implement a feature that converts HTML to DOCX for download. Most of the HTML, PDF to DOCX libraries fail to properly convert design formats like the one shown in the picture below with

. To escape this, I tried using tricks such as replacing it with elements, but this approach results in displaying borders on all four sides, unintentionally constraining the content to a table format. Is there a way to fully convert the following HTML into a DOCX document without these issues?

origin html

<style>
    body { font-family: Arial, sans-serif; }
    .resume { width: 100%; padding: 20px;}
    .header { display: flex; border-bottom: 3px solid;}
    .header h1 { text-align: left;}
    .header p { text-align: right; margin-left: auto;}
    .summary {text-align: left; margin: 20px 0 20px 0; border-bottom: 3px solid; padding-bottom: 20px;}
    .various-section {display: flex; margin-bottom: 20px}
    .various-section-title { flex: 0 0 150px; text-align: left; font-weight: bold; margin-right: 10px;}
    .various-section-item { text-align: left; flex: 1; }
</style>

tried html

    <style>
        body { font-family: Arial, sans-serif; }
        .resume { width: 100%; padding: 20px; border-collapse: collapse; }
        .header, .summary, .various-section { display: flex; }
        .header-row, .summary-row, .section-row { border-bottom: 3px solid; }
        .header h1 { text-align: left; }
        .header p { text-align: right; margin-left: auto; }
        .summary { text-align: left; margin: 20px 0; padding-bottom: 20px; }
        .various-section-title { flex: 0 0 150px; text-align: left; font-weight: bold; margin-right: 10px; }
        .various-section-item { text-align: left; flex: 1; }
        td { border: none; }
    </style>
</head>
<body>
    <table class="resume">
        <tr class="header-row">
            <td colspan="2">
                <div class="header">
                    <h1>I.M.A. SAMPLE II</h1>
                    <p>4321 South 55 Street<br>Bellevue, Nebraska 68005<br>(402) 291-5432<br>example@example.com</p>
                </div>
            </td>
        </tr>
        <tr class="summary-row">
            <td colspan="2">
                <div class="summary">
                    <span style="font-weight: bold;">OBJECTIVE:</span>
                    <span>Internship or Part-time Position in Marketing...</span>
                </div>
            </td>
        </tr>

html

image

docx

image