使用 jspdf(Laravel)将 html 表转换为 pdf

美好的一天。如何使用 Jspdf 将我的 html 表转换为 pdf？我正在使用 laravel，我的 html 表使用 bootstrap css 框架。问题是我能够下载 pdf，但表的结构是混乱的。如何根据确切的格式和表格正确获取我的 pdf：

这是我的 html 表代码：

<table class="table table-bordered table-condensed table-responsive" id="test">
    <thead>
        <tr>
            <th scope="row" colspan="1">Name</th>
            <td colspan="5">{{$student->first_name." ".$student->middle_name." ".$student->surname}}</td>
        </tr>
        <tr>
            <th scope="row">Grade/Class</th>
            <td>{{$student->grade->name}}</td>

            <th scope="row">Term</th>
            <td>{{$term->name}}</td>

            <th scope="row">Date</th>
            <td>{{$date->toFormattedDateString()}}</td>
        </tr>
        <tr>
            <th class="text-center" colspan="2">Subject</th>
            <th class="text-center" colspan="4">Score</th>
        </tr>
    </thead>
    <tbody>
        @foreach($scores as $score)
            <tr>
                <td scope="row" colspan="2">{{$score->subject}}</td>
                @if($score->score <= 69)
                    <td style="color: red;" colspan="4">{{$score->score}}</td>
                @else 
                    <td colspan="4">{{$score->score}}</td>
                @endif
            </tr>
        @endforeach
        <tr>
            <th scope="row" colspan="2" class="text-right">Average</th>
            <td colspan="4" class="text-right"><strong>{{$average}}</strong></td>
        </tr>
    </tbody>
</table>

表 pic：

但这是我从 jspdf 获得的输出：

我的剧本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script>

<script type="text/javascript">   
    $('#download_pdf').click(function () {
        var pdf = new jsPDF('p', 'pt', 'letter');
        // source can be HTML-formatted string, or a reference
        // to an actual DOM element from which the text will be scraped.
        source = $('#test')[0];

        // we support special element handlers. Register them with jQuery-style 
        // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
        // There is no support for any other type of selectors 
        // (class, of compound) at this time.
        specialElementHandlers = {
            // element with id of "bypass" - jQuery style selector
            '#bypassme': function (element, renderer) {
                // true = "handled elsewhere, bypass text extraction"
                return true
            }
        };
        margins = {
            top: 80,
            bottom: 60,
            left: 40,
            width: 522
        };
        // all coords and widths are in jsPDF instance's declared units
        // 'inches' in this case
        pdf.fromHTML(
        source, // HTML string or DOM elem ref.
        margins.left, // x coord
        margins.top, { // y coord
            'width': margins.width, // max width of content on PDF
            'elementHandlers': specialElementHandlers
        },

        function (dispose) {
            // dispose: object with X, Y of the last line add to the PDF 
            //          this allow the insertion of new lines after html
            pdf.save('Test.pdf');
        }, margins);

    });
</script>