jsPDF将html转换为pdf

Question

I'm trying convert HTML to PDF and I working in ASP.NET MVC5 here is my code :

    @model Ebok.Models.AtmClaimReportDetailsInfoViewModel

@{
    ViewBag.Title = "Dzienny raport rozliczenia transakcji bankomatu "+Model.AtmPid+" sieci "+Model.CustomerNumber;
}
<div style="border-width: 2px; padding: 1em; font-size:120%;line-height: 1.5em;" id="fromHTMLtestdiv"> // `<-- THIS DIV NOT WORK`

    <h3 class="text-align-center ">Dzienny raport rozliczenia transakcji bankomatu @Model.AtmPid sieci @Model.CustomerNumber</h3>

    <div class="row">
        <div class="text-align-center col-xs-5">

            <div class="text-align-center padding-top-10">
                @Model.CompanyNameString

                <br />
                NIP: @Model.Nip
            </div>
        </div>

        <div class="text-align-center col-xs-5">
            Rozliczenie bankomatu @Model.AtmPid sieci @Model.CustomerNumber
            za dzień: @Model.BusinessDate.ToShortDateString() <br />
            Wygenerowano dnia: @Model.CreationDate.ToShortDateString()
        </div>

    </div>


        <table class="table table-bordered">
            <thead>
                <tr>
                    <th> Sieć</th>
                    <th> ATM</th>
                    <th> Adres</th>
                    <th> Kwota korekty (uznanie)</th>
                    <th> Kwota transakcji</th>
                    <th> Data i godzina transakcji</th>
                </tr>
            </thead>
            <tbody>
                @Html.Partial("ClaimReportsDetailsPartial")
            </tbody>
        </table>

    <button onclick="javascript:demoFromHTML()" class="button">Run Code</button>

    <div id="fromHTMLtestdiv">  // **THIS DIV WORK FINE**
        <h1>
            We support special element handlers. Register them with jQuery-style.
            <a>asdsdsd</a>
        </h1>
    </div>
</div>

<div class="form-actions">
    <button class="print-link btn btn-info" onclick="jQuery.print('#printClaimReport')"><i class="glyphicon glyphicon-print"></i></button>

    <input type="button" value="Powrót" onclick="location.href='@Url.Action("Index")'" class="btn btn-info" />
</div>

@section Scripts {

<script type='text/javascript'>
    function demoFromHTML() {
        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 = $('#fromHTMLtestdiv')[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
       )
        pdf.output('dataurl');
    }


</script>

}

When using the first div I receives a message

TypeError: renderer.pdf.table is not a function

, but the second div work fine.

Does anyone have any idea?

Answer 1

All, I ran into the same issue and it turned out I was missing the jspdf.plugin.cell.js plugin,located here

https://github.com/MrRio/jsPDF/blob/master/jspdf.plugin.cell.js

hope that helps

Answer 2

我通过更改插件的版本解决了这个问题。