-2

I have a html code with multiple tags which is having text in it.

Problem Statement : I want to create a csv with headers and write a text in html tags in the respective column of csv and then want a downloadable button in a UI with which I can download the csv.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <tbody>
        <tr data-index="0">
            <td>
                <div class="card border-left-success shadow h-100 py-2 mb-2 ml-2">
                    <div class="card-body">
                        <h4 class="card-title mb-2 font-weight-bold">Service Name -1 </h4>
                        <div class="clearfix my-3"></div>
                        <h5 class="card-text">Regarding Service Name-1</h5>
                        <h5><span class="badge badge-pill badge-success"><a title="Job Details" target="_blank"
                                    href="hhh" class="text-white">DOG</a> </span> <span
                                class="badge badge-pill badge-success"><a title="Job Details" target="_blank" href="hhh"
                                    class="text-white">CAT</a> <a title="Volumetric report" class="text-white"
                                    target="_blank" href="hhh"><i class="fas fa-file-medical-alt"></i></a> <a
                                    title="Dup report" class="text-white" href="hhh"><i class="fas fa-copy"></i></a> <a
                                    title="Embargo Privacy Filter Report" class="text-white" href="hhh"><i
                                        class="fas fa-file-excel"></i></a> <a title="CAC report" class="text-white"
                                    href="hhh"><i class="fas fa-file-signature"></i></a> <a
                                    title="Existing Source Place Report" class="text-white" href="hhh"><i
                                        class="fas fa-file-archive"></i></a> <a title="VVS Validation Failed Report"
                                    class="text-white" href="hhh"><i class="fas fa-file-code"></i></a> <a
                                    title="Job report" class="text-white" href="hhh"><i
                                        class="fas fa-file-invoice"></i></a> <a title="Cumulative report"
                                    class="text-white" href="hhh"><i class="fas fa-file-medical"></i></a></span> <span
                                class="badge badge-pill badge-success"><a title="Job Details" target="_blank" href="hhh"
                                    class="text-white">LION</a> <a title="Volumetric report" class="text-white"
                                    target="_blank" href="hhh"><i class="fas fa-file-medical-alt"></i></a> <a
                                    title="Job report" class="text-white" href="hhh"><i
                                        class="fas fa-file-invoice"></i></a> <a title="Cumulative report"
                                    class="text-white" href="hhh"><i class="fas fa-file-medical"></i></a></span> <span
                                class="badge badge-pill badge-success"><a title="Job Details" target="_blank" href="hhh"
                                    class="text-white">TIGER</a> <a title="Volumetric report" class="text-white"
                                    target="_blank" href="hhh"><i class="fas fa-file-medical-alt"></i></a> <a
                                    title="Job report" class="text-white" href="hhh"><i
                                        class="fas fa-file-invoice"></i></a> <a title="Cumulative report"
                                    class="text-white" href="hhh"><i class="fas fa-file-medical"></i></a></span> <span
                                class="badge badge-pill badge-success"><a title="Job Details" target="_blank" href="hhh"
                                    class="text-white">RABBIT</a> <a title="Volumetric report" class="text-white"
                                    target="_blank" href="hhh"><i class="fas fa-file-medical-alt"></i></a> <a
                                    title="Job report" class="text-white" href="hhh"><i
                                        class="fas fa-file-invoice"></i></a> <a title="Cumulative report"
                                    class="text-white" href="hhh"><i class="fas fa-file-medical"></i></a> </span> </h5>
                        <div class="text-muted"><small><i class="fa fa-user"></i> Submitted By: xyz On: 7/29/2022,
                                11:19:24 AM </small></div>
                        <div class="text-muted"><small><i class="fa fa-envelope"></i> Email To: xyz@gmail.com</small>
                        </div>
                        <div class="my-2 clearfix">
                            <div class="row">
                                <div class="col-10">
                                    <a class="btn btn-sm btn-light btn-icon-split copier float-left"
                                        data-clipboard-text="uihfg" title="Click to Copy">
                                        <span class="icon text-gray-600"><i class="fas fa-hdd"></i> NFFS</span>
                                        <span class="text">mycomputer/folder</span>
                                    </a>
                                </div>

                                <div class="col">
                                    <span class="float-right">&nbsp;<span>
                                            <a tabindex="0" class="btn btn-sm btn-dark float-right" role="button"
                                                title="" onclick="yu" data-original-title="Payload"><i
                                                    class="fas fa-info-circle"></i></a>
                                        </span></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
            <td><a target="_blank" href="hhh">4567</a></td>
        </tr>
        <tr data-index="1">
            <td>
                <div class="card border-left-success shadow h-100 py-2 mb-2 ml-2">
                    <div class="card-body">
                        <h4 class="card-title mb-2 font-weight-bold">Service Name -2</h4>
                        <div class="clearfix my-3"></div>
                        <h5 class="card-text"> Regarding Service Name-2</h5>
                        <h5><span class="badge badge-pill badge-success"><a title="Job Details" target="_blank"
                                    href="hhh" class="text-white">DOG</a> </span> <span
                                class="badge badge-pill badge-success"><a title="Job Details" target="_blank" href="hhh"
                                    class="text-white">CAT</a> <a title="Volumetric report" class="text-white"
                                    target="_blank" href="hhh"><i class="fas fa-file-medical-alt"></i></a> <a
                                    title="Dup report" class="text-white" href="hhh"><i class="fas fa-copy"></i></a> <a
                                    title="Embargo Privacy Filter Report" class="text-white" href="hhh"><i
                                        class="fas fa-file-excel"></i></a> <a title="CAC report" class="text-white"
                                    href="hhh"><i class="fas fa-file-signature"></i></a> <a
                                    title="Existing Source Place Report" class="text-white" href="hhh"><i
                                        class="fas fa-file-archive"></i></a> <a title="VVS Validation Failed Report"
                                    class="text-white" href="hhh"><i class="fas fa-file-code"></i></a> <a
                                    title="Job report" class="text-white" href="hhh"><i
                                        class="fas fa-file-invoice"></i></a> <a title="Cumulative report"
                                    class="text-white" href="hhh"><i class="fas fa-file-medical"></i></a></span> </h5>
                        <div class="text-muted"><small><i class="fa fa-user"></i> Submitted By: abc On: 6/9/2022,
                                8:21:30 PM </small></div>
                        <div class="text-muted"><small><i class="fa fa-envelope"></i> Email To: abc@gmail.com</small>
                        </div>
                        <div class="my-2 clearfix">
                            <div class="row">
                                <div class="col-10">
                                    <a class="btn btn-sm btn-light btn-icon-split copier float-left"
                                        data-clipboard-text="uiih/" title="Click to Copy">
                                        <span class="icon text-gray-600"><i class="fas fa-hdd"></i> SSS</span>
                                        <span class="text">mycomputer/folder/</span>
                                    </a>
                                </div>

                                <div class="col">
                                    <span class="float-right">&nbsp;<span>
                                            <a tabindex="0" class="btn btn-sm btn-dark float-right" role="button"
                                                title="Payload" onclick="showJsonPopover(hhhh)"><i
                                                    class="fas fa-info-circle"></i></a>
                                        </span></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
            <td><a target="_blank" href="hhh">7634</a></td>
        </tr>
        <tr data-index="2">
            <td>
                <div class="card border-left-danger shadow h-100 py-2 mb-2 ml-2">
                    <div class="card-body">
                        <h4 class="card-title mb-2 font-weight-bold">Service Name -3</h4>
                        <div class="clearfix my-3"></div>
                        <h5 class="card-text"> Regarding Service Name-3</h5>
                        <h5><span class="badge badge-pill badge-success"><a title="Job Details" target="_blank"
                                    href="hhh" class="text-white">DOG</a> <a title="Resume Staging" class="text-white"
                                    href="hhh"><i class="fas fa-play-circle"></i></a> </span> <span
                                class="badge badge-pill badge-danger"><a title="Job Details" target="_blank" href="hhh"
                                    class="text-white">CAT</a> </span> </h5>
                        <div class="text-muted"><small><i class="fa fa-user"></i> Submitted By: uui On: 6/9/2022,
                                8:38:17 AM </small></div> <div class="text-muted"><small><i class="fa fa-envelope"></i>
                            Email To: uui@gmail.com</small>
                    </div>
                    <div class="my-2 clearfix">
                        <div class="row">
                            <div class="col-10">
                                <a class="btn btn-sm btn-light btn-icon-split copier float-left"
                                    data-clipboard-text="xml" title="Click to Copy">
                                    <span class="icon text-gray-600"><i class="fas fa-hdd"></i> YU3</span>
                                    <span class="text">mycomputer/folder/</span>
                                </a>
                            </div>

                            <div class="col">
                                <span class="float-right">&nbsp;<span>
                                        <a tabindex="0" class="btn btn-sm btn-dark float-right" role="button"
                                            title="Payload" onclick="showJsonPopover(yuh)"><i
                                                class="fas fa-info-circle"></i></a>
                                    </span></span>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            </td>
            <td><a target="_blank" href="yuhg">9087</a></td>
        </tr>
        <tr data-index="3">
            <td>
                <div class="card border-left-danger shadow h-100 py-2 mb-2 ml-2">

                    <span>
                        <i class="fa fa-download" aria-hidden="true"></i>
                    </span>

</body>

</html>

Expected CSv : enter image description here

if <span> tag of DOG has a class = 'badge-success' then in a DOG column success should get inserted. if any one of the column is absent then - should appear in csv.

Reffer fiddle link : https://jsfiddle.net/f5kc1g2d/

The Tester
  • 53
  • 9

1 Answers1

0

First of all you need to do some sort of HTML crawlig. Methods that you need to use is some combination of:

  • document.getElementsByClassName("class-to-find") - return HTMLCollection of elements with className
  • document.getElementById("id-to-find") - if you can edit html on page I would recomend you to add ID to table to find exactly table that you need.
  • Element.closest(selector) - if you have element of table / column / ... you can find in it by various types of selector (see documentation in MDN)
    • personally I think this is what you need
  • ...

In advance if page is yours and you can modify it you can make it easier to find needed elments by adding:

  • id for table (your first element to get)
  • data attributes to elements with data (e.g. data-name="service-name", data-name="description", data-name="date", ...)

Than you will need to create downloadable link. Try something like this post

Jakub Juřena
  • 43
  • 5