如何从 html 表创建 html 文件

Question

我想从 HTML 表中创建 HTML 格式的报告。 这是我在 Laravel 中的表。

我尝试用html2pdf 来做，但它不能正常工作，任何人都可以帮我解决这个问题吗？ 我想像这样下载我的表table1.html和 CSS 和 HTML 表数据或将其转换为 ZBCD1B68617759BADFCD16

<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

如果它不起作用，请看下面的代码片段然后 go 到jsfiddle 链接

 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

您可以通过 2 种方式来编写您的自定义 js function 并手动完成

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();
        }

和方式2你可以用js中的一些插件来做到这一点，比如html2pdf或html2canvas或jspdf ，带有autotable插件这个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');
            });
        }

祝你好运