正在将 html table 导出为 pdf

Question

我的代码有什么问题？我想将我的 html table 导出为 pdf 并保存。然后碰巧它只会打开空白屏幕的新浏览器。这是我的示例代码。请help.Thank你

<!DOCTYPE html>
<html>
</head>
<body>
<div id="pdf">
<table id="StudentInfoListTable">
            <thead>
                <tr>    
                    <th>Name</th>
                    <th>Email</th>
                    <th>Track</th>
                    <th>S.S.C Roll</th>
                    <th>S.S.C Division</th>
                    <th>H.S.C Roll</th>
                    <th>H.S.C Division</th>
                    <th>District</th>

                </tr>
            </thead>
            <tbody>

                    <tr>
                        <td>alimon  </td>
                        <td>Email</td>
                        <td>1</td>
                        <td>2222</td>
                        <td>as</td>
                        <td>3333</td>
                        <td>dd</td>
                        <td>33</td>
                    </tr>               
            </tbody>
        </table>
    </div>

  <!--<button >Submit</button> -->
  <li> <a href="javascript:PrintDiv()">Export to pdf</a> </li>

<script type="text/javascript">     
    function PrintDiv(htmlexportPDF) {    
       var divToPrint = document.getElementById(htmlexportPDF);
       alert('Printing: Success');
       var popupWin = window.open('', '_blank', 'width=650,height=600');
       popupWin.document.open();
       popupWin.document.write('<style type="text/css">body{ margin:0.5px;');
       popupWin.document.write('font-family:verdana,Arial;color:#000;');
       popupWin.document.write('font-family:Verdana, Geneva, sans-serif; font-size:8px;}');
       popupWin.document.write('a{color:#000;text-decoration:none;}</style>');
       popupWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</html>');
       popupWin.document.close();
            }
 </script>

Answer 1

您的 JavaScript 函数 printDiv 接受参数 htmlexportPDF。

function PrintDiv(htmlexportPDF) {

问题是，当您从 <a> link 调用 PrintDiv 时，您没有提供任何参数。

要解决此问题，请更改

<a href="javascript:PrintDiv()">Export to pdf</a>

到

<a href="javascript:PrintDiv('StudentInfoListTable')">Export to pdf</a>

此外，在您的 HTML 代码中，您从未放置开始 <head> 标签或结束 </body> 标签或结束 </html> 标签。

正在将 html table 导出为 pdf

Exporting html table to pdf

html

javascript

pdf

html-table