locked
JsPDF output not working for long files RRS feed

  • Question

  • User1185448985 posted

    I'm converting a JsPDF output to binary then passing it to action but if the document is long then i received null in data parameter, if shorter document then it passes properly but not the full view.

    i tried to save the pdf file before passing it to see the result and it looks like the following :

    short story:

    long story "where i get null in action":

    Razor

    ..................
    <a type="button" href="javascript:sendPdf()" class="btn btn-outline-secondary btn-sm"><i class="fa fa-envelope-o"></i> Email</a> <div id="pdfImg"> <table class="table table-bordered table-condensed"> <tr> <th class="text-center"><h3>@Model.Story.Title</h3></th> </tr> @if (Model.Story.Child != null) { if (Model.Story.Child.FirstName != null && Model.Story.Child.LastName != null) { <tr> <th class="text-center"><h3>@Model.Story.Child.FirstName @Model.Story.Child.LastName</h3></th> </tr> } } @foreach (var item in Model.SentencesList) { <tr class="text-center"> @{ if (item.Image != null) { <td> <img src=@item.Image.ImageSelected /> </td> } else { <td> <h6>no image</h6> </td> } } </tr> <tr class="text-center"> <td> @Html.DisplayFor(s => item.SentenceText) </td> </tr> } </table> </div>

    JavaScript

    @section Scripts{
        <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js" integrity="sha512-s/XK4vYVXTGeUSv4bRPOuxSDmDlTedEpMEcAQk0t/FMd9V6ft8iXdwSBxV0eD60c6w/tjotSlKu9J2AAW1ckTA==" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
        <script type="text/javascript">
            
            function sendPdf() {
                domtoimage.toPng(document.getElementById('pdfImg'))
                    .then(function (blob) {
                        var pdf = new jsPDF('p', 'pt', [$('#pdfImg').width(), $('#pdfImg').height()]);
                        pdf.addImage(blob, 'JPEG', 0, 0, $('#pdfImg').width(), $('#pdfImg').height());
    //pdf.save("story.pdf"); the outputs i've put above var binary = pdf.output(); var reqData = btoa(binary); $.ajax({ url: "/Story/EmailPdf", data: { data: reqData }, dataType: "json", type: "POST", }); }); } </script> }

    Action

    public void EmailPdf(string data)
    {
    .................
    }

    i don't have that much of background in jspdf, domtoimage and base64 stuff so any advice or alternatives  will help a lot

    Friday, October 16, 2020 10:11 PM

All replies

  • User1312693872 posted

    Hi,Amani Al

    I'm converting a JsPDF output to binary then passing it to action but if the document is long then i received null in data parameter, if shorter document then it passes properly but not the full view.

    You can try to change the 'p' to '1', which has a wider orientation. This is about the jsPDF attribute, and you can modify it depends on your needs.

    var pdf = new jsPDF('1', 'pt', [$('#pdfImg').width(), $('#pdfImg').height()]);

    Result:

    Best Regards,

    Jerry Cai

    Monday, October 19, 2020 6:11 AM
  • User1185448985 posted

    I understand your point of view but the problem occurs when passed to the action not when saved as pdf

    the following gifs clarify the problem where short documents reach the action whereas longer ones do not:

    Short document:

    Long document:

    Monday, October 19, 2020 10:02 PM
  • User1312693872 posted

    Hi,Amani AI

    Change your script to the following code:

    This issue is caused because the base64 size is too large and beyond the limit , so you can use FormData to store the data and pass it to controller, it can improve the efficiency:

    function sendPdf() {
                    domtoimage.toPng(document.getElementById('pdfImg'))
                        .then(function (blob) {
                            var pdf = new jsPDF('1', 'pt', [$('#pdfImg').width(), $('#pdfImg').height()], true);
                            pdf.addImage(blob, 'JPEG', 0, 0, $('#pdfImg').width(), $('#pdfImg').height(),'FAST');
                            //pdf.save("story.pdf");
                            var binary = pdf.output();
                            var reqData = btoa(binary);
                            var formdata = new FormData();
                            formdata.append('data', reqData);
                            $.ajax({
                                url: "/Home/EmailPdf",
                                data: formdata,
                                dataType: "json",
                                type: "Post",
                                processData: false,
                                contentType: false,
                            });
                        });
                }

    Result:

    Best Regards,

    Jerry Cai

    Wednesday, October 21, 2020 6:21 AM