html2canvas cuts the display when there is horizontal scrollbar

Question

I want to export a div as pdf with html2canvas :

function printPdf() {
    var w = document.getElementById("to_print").offsetWidth;
    var h = document.getElementById("to_print").offsetHeight;
    html2canvas(document.getElementById("to_print"), {
        dpi: 300,
        scale: 3,
        onrendered: function(canvas) {
            var img = canvas.toDataURL("image/jpeg", 1);
            var doc = new jsPDF('L', 'px', [w, h]);
            doc.addImage(img, 'JPEG', 0, 0, w, h);
            doc.save('rapport-arrivee-depart.pdf');
        }
    });
}

The content to be exported is :

<div id="to_print">
    <div class="row">
        <div class="col-md-12" style="background-color: white">
            <div class="portlet box green">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="fa fa-globe"></i><fmt:message key="HOTEL.REPORT_ARRIVAL_DEPARTURE.PAGE_BREADCRUMB.SPAN"/> </div>
                    <div class="tools"> </div>
                </div>
                <div class="portlet-body">
                    <table class="table table-striped table-bordered table-hover" id="sample_1">
                        <thead>
                            <tr>
                                <th colspan="3"></th>
                                <th class="uppercase text-center" colspan="3"><fmt:message key="COMMON.DEPARTURE.TITLE"/></th>
                                <th class="uppercase text-center" colspan="3"><fmt:message key="COMMON.ARRIVED.TITLE"/></th>
                                <th colspan="2"></th>
                            </tr>
                            <tr role="row">
                                <th class="uppercase text-center"> <fmt:message key="COMMON.NUM.CHAMBER_MIN"/> </th>
                                <th class="uppercase text-center"> <fmt:message key="COMMON.TYPE.TITLE"/> </th>
                                <th class="uppercase text-center"> <fmt:message key="COMMON.REPORT.TITLE"/> </th>
                                <th class="uppercase text-center"> <fmt:message key="COMMON.TABLE.NAME_MIN"/> </th>
                                <th class="uppercase text-center"> <fmt:message key="COMMON.ADULT_CHILD.TITLE"/> </th>
                                <th class="uppercase text-center"> <fmt:message key="COMMON.CHILD.TITLE"/> </th>
                                <th class="uppercase text-center"> <fmt:message key="COMMON.TABLE.NAME_MIN"/> </th>
                                <th class="uppercase text-center"> <fmt:message key="COMMON.ADULT_CHILD.TITLE"/> </th>
                                <th class="uppercase text-center"> <fmt:message key="COMMON.CHILD.TITLE"/> </th>
                                <th class="uppercase text-center"> <fmt:message key="COMMON.HOUR.TITLE"/> </th>
                                <th class="uppercase text-center"> <fmt:message key="COMMON.NUMBER.NIGHT"/> </th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                        <tfoot>
                            <tr>
                                <th class="uppercase text-center"></th>
                                <th class="uppercase text-center"></th>
                                <th class="uppercase text-center"></th>
                                <th class="uppercase text-center"></th>
                                <th style="text-align:center"></th>
                                <th class="uppercase text-center"></th>
                                <th class="uppercase text-center"></th>
                                <th style="text-align:center"></th>
                                <th class="uppercase text-center"></th>
                                <th class="uppercase text-center"></th>
                                <th class="uppercase text-center"></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>                        
            </div>
        </div>                        
    </div>
    <div class="row invoice-subtotal right" style="background-color: white">
        <div class="col-xs-3 col-xs-offset-3">
            <strong><fmt:message key="HOTEL.REPORT_ARRIVAL_DEPARTURE.NUMBER_BEDROOM_DEPARTURE"/> : <span id="bindNbDepart"><fmt:message key="COMMON.NOT.DEFINED"/></span></strong>
        </div>
        <div class="col-xs-3">
            <strong><fmt:message key="HOTEL.REPORT_ARRIVAL_DEPARTURE.NUMBER_BEDROOM_ARRIVAL"/> : <span id="bindNbArrivee"><fmt:message key="COMMON.NOT.DEFINED"/></span></strong>
        </div>
    </div>
</div>

Here is the web page displayed :

And here is the pdf generated :

So how to display all the content of the web page inside the pdf ?

score 0 · Answer 1 · answered Jan 16 '23 at 11:46

You can set the window width and height in the html2canvas call. Also instead of offsetWidth you should use scrollWidth. Before you do that it may be needed to scroll to the start of the page. Code, adapted from https://github.com/niklasvh/html2canvas/issues/1438#issuecomment-739244530 and https://stackoverflow.com/a/68707065/:

scrollX: -window.scrollX,
scrollY: -window.scrollY,
windowWidth: document.documentElement.scrollWidth,
windowHeight: document.documentElement.scrollHeight,

Full html code, with some additional libraries and data added to replicate your example:

<html>
<head>
<title>
pdf export with scrollbars
</title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
function printPdf() {
    var w = document.getElementById("to_print").scrollWidth;
    var h = document.getElementById("to_print").scrollHeight;
    html2canvas(document.getElementById("to_print"), {
        scrollX: -window.scrollX,
        scrollY: -window.scrollY,
        windowWidth: document.documentElement.scrollWidth,
        windowHeight: document.documentElement.scrollHeight,
        dpi: 300,
        scale: 3,
        }).then(function (canvas) {
            var img = canvas.toDataURL("image/jpeg", 1);
            var doc = new jsPDF('L', 'px', [w, h]);
            doc.addImage(img, 'JPEG', 0, 0, w, h);
            doc.save('rapport-arrivee-depart.pdf');
        });
}
</script>
</head>
<body>
<div id="to_print">
    <div class="row">
        <div class="col-md-12" style="background-color: white">
            <div class="portlet box green">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="fa fa-globe"></i><fmt:message key="HOTEL.REPORT_ARRIVAL_DEPARTURE.PAGE_BREADCRUMB.SPAN"/> </div>
                    <div class="tools"> </div>
                </div>
                <div class="portlet-body">
                    <table class="table table-striped table-bordered table-hover" id="sample_1">
                        <thead>
                            <tr>
                                <th colspan="3"></th>
                                <th class="uppercase text-center" colspan="3">Départ</th>
                                <th class="uppercase text-center" colspan="3">Arrivée</th>
                                <th colspan="2"></th>
                            </tr>
                            <tr role="row">
                                <th class="uppercase text-center">No. Chambre</th>
                                <th class="uppercase text-center">Type</th>
                                <th class="uppercase text-center">État</th>
                                <th class="uppercase text-center">Nom</th>
                                <th class="uppercase text-center">Adult./Enf.</th>
                                <th class="uppercase text-center">Enfants(s)</th>
                                <th class="uppercase text-center">Nom</th>
                                <th class="uppercase text-center">Adult./Enf.</th>
                                <th class="uppercase text-center">Enfants(s)</th>
                                <th class="uppercase text-center">Heure</th>
                                <th class="uppercase text-center">No. nuits</th>
                            </tr>
                        </thead>
                        <tbody>
                        <tr><td>1</td><td>Chambre simple</td><td>CLEAN</td><td>AndrianiainaAndyFrédéricnomtrèslargeprovoquantdesbarresdedéfilement</td><td>1</td><td>1</td><td>AndrianiainaAndyFrédéricnomtrèslargeprovoquantdesbarresdedéfilement</td><td>1</td><td>1</td><td>10:00</td><td>5</td></tr>
                        <tr><td>1</td><td>Chambre simple</td><td>CLEAN</td><td>AndrianiainaAndyFrédéricnomtrèslargeprovoquantdesbarresdedéfilement</td><td>1</td><td>1</td><td>AndrianiainaAndyFrédéricnomtrèslargeprovoquantdesbarresdedéfilement</td><td>1</td><td>1</td><td>10:00</td><td>5</td></tr>
                        <tr><td>1</td><td>Chambre simple</td><td>CLEAN</td><td>AndrianiainaAndyFrédéricnomtrèslargeprovoquantdesbarresdedéfilement</td><td>1</td><td>1</td><td>AndrianiainaAndyFrédéricnomtrèslargeprovoquantdesbarresdedéfilement</td><td>1</td><td>1</td><td>10:00</td><td>5</td></tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <th class="uppercase text-center"></th>
                                <th class="uppercase text-center"></th>
                                <th class="uppercase text-center"></th>
                                <th class="uppercase text-center"></th>
                                <th style="text-align:center"></th>
                                <th class="uppercase text-center"></th>
                                <th class="uppercase text-center"></th>
                                <th style="text-align:center"></th>
                                <th class="uppercase text-center"></th>
                                <th class="uppercase text-center"></th>
                                <th class="uppercase text-center"></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>                        
            </div>
        </div>                        
    </div>
    <div class="row invoice-subtotal right" style="background-color: white">
        <div class="col-xs-3 col-xs-offset-3">
            <strong><fmt:message key="HOTEL.REPORT_ARRIVAL_DEPARTURE.NUMBER_BEDROOM_DEPARTURE"/> : <span id="bindNbDepart"><fmt:message key="COMMON.NOT.DEFINED"/></span></strong>
        </div>
        <div class="col-xs-3">
            <strong><fmt:message key="HOTEL.REPORT_ARRIVAL_DEPARTURE.NUMBER_BEDROOM_ARRIVAL"/> : <span id="bindNbArrivee"><fmt:message key="COMMON.NOT.DEFINED"/></span></strong>
        </div>
    </div>
</div>
 <button onclick="printPdf();">Print</button> 
</body>
</html>

Resulting pdf:

@pheromix Maybe you have an older version of `html2canvas`? I needed to update your code from `onrendered: function(canvas)` to `.then(function(canvas))` to be able to get the pdf at all, some searching showed that `onrendered` was used in previous versions. Maybe the other properties used here are affected as well. — Marijn, Jan 16 '23 at 12:08
here is the version of html2canvas I use : `html2canvas 1.0.0-alpha.12 — pheromix, Jan 16 '23 at 12:17
That version is from 2018, so almost 5 years old now (see https://github.com/niklasvh/html2canvas/releases/tag/v1.0.0-alpha.12). I would recommend using the latest version with `` as I have done in my answer, or download 1.4.1 from https://github.com/niklasvh/html2canvas/releases if you want to run it from your own setup. — Marijn, Jan 16 '23 at 12:27
I included `` , and I followed your code but it is still cut — pheromix, Jan 16 '23 at 12:41
Which browser do you use? I tested with Firefox to get the result above. Or maybe you are looking at an old pdf by mistake? Try removing all generated pdfs first and maybe also change the file name in the JavaScript code to be sure you are looking at the new file. Also, did you try the code in my answer stand-alone without changes, or did you try to integrate it in your actual page? If you integrated it then you could also try to use the code as I posted as it is. — Marijn, Jan 16 '23 at 12:48
I use google chrome; I open new pdf : everytime I finished opening a pdf then I close and delete it. I tried to integrate your code in my actual code, and I used the code as you posted — pheromix, Jan 16 '23 at 12:53
I tried Chrome now, that also works for me so that rules out the browser as the cause of the problem. — Marijn, Jan 16 '23 at 12:59
the jspdf version is `1.4.1 , Built on 2018-06-06 CommitID 3233f44044` , may be it s also the problem ? — pheromix, Jan 16 '23 at 13:04
You could also try some of the other approaches in https://stackoverflow.com/questions/36213275/html2canvas-does-not-render-full-div-only-what-is-visible-on-screen/68707065, there are many different suggestions in the answers there. — Marijn, Jan 16 '23 at 14:05

html2canvas cuts the display when there is horizontal scrollbar

1 Answers1