如何从 html 表创建 html 文件答案

【问题标题】：How to create html file from html table如何从 html 表创建 html 文件
【发布时间】：2020-10-28 21:28:19
【问题描述】：

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

我尝试用 html2pdf 来做，但它不能正常工作，任何人都可以帮我解决这个问题吗？我希望像 table1.html 这样使用 CSS 和 HTML 表格数据下载表格或将其转换为 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>

【问题讨论】：

标签： javascript php html laravel pdf

【解决方案1】：

请看下面的sn-p如果它不起作用然后去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>

【讨论】：

【解决方案2】：

你可以通过 2 种方式做到这一点您可以编写自定义 js 函数并手动完成

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 with autotable plugin 此代码为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');
            });
        }

祝你好运

【讨论】：