search

privateOmega / html-to-docx

HTML to DOCX converter
MIT License
373 stars 140 forks source link

How to preserve border-bottom without table #231

Open jjikkobro opened 8 months ago

jjikkobro commented 8 months ago

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