将 html 页面另存为 PDF | HTML2PDF

我需要以 PDF 格式将表格保存在 HTML 页面中。如您所知,我在此表中有 30 列。 see image

我制作了一个 javascript 函数(使用 HTML2PDF library ),“Genera PDF”按钮将下载 PDF 格式的表格。有javascript函数:

function generatePDF(){
    element = document.getElementById("table-bordered");
    var opt = {
               filename: 'myreport.pdf',
               image: { type: 'jpeg', quality: 0.98 },
               jsPDF: { unit: 'in', format: 'A4', orientation: 'landscape' }
    };
    htmltopdf().from(element).set(opt).save();
}

问题是 PDF 的布局很糟糕(不在页面中心,列仅到 27。)

PDF file

我如何修改我的代码,因为它运行良好?否则,还有其他 html2pdf 可以完成这项工作吗?谢谢

stack overflow Save html page as PDF | HTML2PDF
原文答案

答案:

作者头像
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<style>  
  table {  
    font-family: arial, sans-serif;  
    border-collapse: collapse;  
    width: 50%;
    margin: 0px auto;
  }
  #htmlContent{
    text-align: center;
  }  
  td, th, button {  
    border: 1px solid #dddddd;  
    text-align: left;  
    padding: 8px;  
  }  
  button {  
    border: 1px solid black;   
  } 
  tr:nth-child(even) {  
    background-color: #dddddd;  
  }  
</style>  
<div id="htmlContent">
  <h2 style="color: #0094ff">Hello</h2>  
  <h3>About this Code:</h3>  
  <p>Demo of how to convert and Download HTML page to PDF file with CSS, using JavaScript and jQuery.</p>  
  <table>  
    <tbody>  
      <tr>  
        <th>Person</th>  
        <th>Contact</th>  
        <th>Country</th>  
      </tr>  
      <tr>  
        <td>John</td>  
        <td>+2345678910</td>  
        <td>Germany</td>  
      </tr>  
      <tr>  
        <td>Jacob</td>  
        <td>+1234567890</td>  
        <td>Mexico</td>  
      </tr>  
      <tr>  
        <td>Eleven</td>  
        <td>+91234567802</td>  
        <td>Austria</td>  
      </tr>  
    </tbody>  
  </table>    
</div>
<div id="editor"></div>
<center>
  <p>
    <button id="generatePDF">generate PDF</button>
  </p>
 Ref:<a href="https://phpcoder.tech">phpcoder.tech</a>
</center>

Js代码

var doc = new jsPDF();
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
};

//margins.left, // x coord   margins.top, { // y coord
$('#generatePDF').click(function () {
    doc.fromHTML($('#htmlContent').html(), 15, 15, {
        'width': 700,
        'elementHandlers': specialElementHandlers
    });
    doc.save('sample_file.pdf');
});
作者头像

您可以使用 js pdf。我的要求几乎完成了。我希望它对你有用。

$(document).ready(function () {  
    var form = $('.form'),  
    cache_width = form.width(),  
    a4 = [595.28, 841.89]; // for a4 size paper width and height  

    $('#create_pdf').on('click', function () {  
        $('body').scrollTop(0);  
        createPDF();  
    });  

    function createPDF() {  
        getCanvas().then(function (canvas) {  
            var  
             img = canvas.toDataURL("image/png"),  
             doc = new jsPDF({  
                 unit: 'px',  
                 format: 'a4'  
             });  
            doc.addImage(img, 'JPEG', 20, 20);  
            doc.save('Invoice');  
            form.width(cache_width);  
        });  
    }  

    function getCanvas() {  
        form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');  
        return html2canvas(form, {  
            imageTimeout: 2000,  
            removeContainer: true  
        });  
    }
});
       table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }

        td {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }

        th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
            background-color: #111;
            color: white;
        }

        tr:nth-child(odd) {
            background-color: #dddddd;
        }
<!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>PDF</title>
</head>

<body>
    <h1>How To Convert HTML To PDF Using JavaScript</h1>
    <form class="form">
        <table>
            <tbody>
                <tr>
                    <th>Company Name</th>
                    <th>Employee Name</th>
                    <th>Country</th>
                </tr>
                <tr>
                    <td>Dell</td>
                    <td>Maria</td>
                    <td>Germany</td>
                </tr>
                <tr>
                    <td>Asus</td>
                    <td>Francisco</td>
                    <td>Mexico</td>
                </tr>
                <tr>
                    <td>Apple</td>
                    <td>Roland</td>
                    <td>Austria</td>
                </tr>
                <tr>
                    <td>HP</td>
                    <td>Helen</td>
                    <td>UK</td>
                </tr>
                <tr>
                    <td>Lenovo</td>
                    <td>Yoshi</td>
                    <td>Canada</td>
                </tr>
            </tbody>
        </table><br>
        <input type="button" id="create_pdf" value="Generate PDF">
    </form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>  
</html>