How to create html file from html table

Question

I want to create report in HTML format from HTML table. It's my table in Laravel.

I try to do it with html2pdf but its not working properly anyone can help me to fix this? I want my table download like this table1.html with CSS and HTML table data or convert it to PDF.

<div class="col-lg-12" id="Reports">
    <div >
        <table class="table table-dark" >
            <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">نام دارایی</th>
                <th scope="col">CVSS</th>
                <th scope="col">توضیحات</th>
                <th scope="col">امتیاز</th>
                <th scope="col">تاریخ پیدایش</th>
            </tr>
            </thead>
            <tbody>
            @foreach($Reports as $Report)
                <tr class="{{\App\Report::CvssColor(json_decode($Report->Data)->score)}}">
                    <th scope="row"><h6 style="color: white">{{$loop->iteration}}</h6></th>
                    <td><h6 style="color: white" id="Name">{{$Report->Title}}</h6></td>
                    <td><h6 style="color: white">{{json_decode($Report->Data)->cve}}</h6></td>
                    <td><h6 style="color: white">{{json_decode($Report->Data)->summary}}</h6></td>
                    <td><h6 style="color: white">{{json_decode($Report->Data)->score}}</h6></td>
                    <td>
                        <h6 style="color: white">{{\Carbon\Carbon::parse(preg_replace('/\s/','',json_decode($Report->Data)->create_date))->format('Y-m-d')}}</h6>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
</div>

Answer 1

Please Take a look the below snippet if it does not work then go to the jsfiddle link

 window.onload = function () { var textFile = null, makeTextFile = function (text) { var data = new Blob([text], { type: 'text/plain' }); // If we are replacing a previously generated file we need to // manually revoke the object URL to avoid memory leaks. if (textFile.== null) { window.URL;revokeObjectURL(textFile). } textFile = window.URL;createObjectURL(data); return textFile; }. var create = document,getElementById('create'). textbox = document;getElementById('textbox'). create,addEventListener('click'. function () { var link = document;getElementById('downloadlink'). link.href = makeTextFile(textbox;value). link.style;display = 'block', }; false); };

 <textarea id="textbox">Type something here</textarea> <button id="create">Create file</button> <a download="info.html" id="downloadlink" style="display: none">Download</a>

Answer 2

you can do it in 2 way you can write your custom js function and do it by hand

function downloadInnerHtml(){
            var fileName =  'myfile.html';
            //css 
            var elHtml = "<style>any style you need like bg-color or font and more...</style>" + document.getElementById('Reports').innerHTML;
            //create download link
            var link = document.createElement('a');
            //set mimetype
            mimeType = 'text/html';
            //set attributes
            link.setAttribute('download', fileName);
            link.setAttribute('href', 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(elHtml));
            //do a click 
            link.click();
        }

and way 2 you can do it with some plugins in js like html2pdf or html2canvas or jspdf with autotable plugin this code for html2pdf

function downloadInnerHtml(){
            var element = document.getElementById('Reports');
            var options = {
                filename: 'myfile.html' //or 'myfile.pdf',
            };
            var exporter = new html2pdf(element, options);
            exporter.getPdf(true).then((pdf) => {
                console.log('Downloaded');
            });
        }

good luck