Search code examples
cssimagechart.jshtml-pdf

html-pdf: How to ensure image doesn't span a page break

I am using html-pdf to convert HTML to PDF. To add Graphs, I am using Chart.js.

When generate the PDF, Graph break into two pages as shown in below image.

This is how I add the Graph.

<canvas id="bar-chart" class="canvas-styles margin-top-20" 
 style="display: block; page-break-before: auto; page-break-after: auto; page-break-inside: avoid;">
</canvas>

enter image description here

How could I solve this?

Solution

  • Add into your css an @print section for your div:

    @media print {
     div#canvasWrap { width: 2.4cm; }
  }

    And add a wrapping div around your canvas:

    <div id="canvasWrap">
    <canvas id="bar-chart" class="canvas-styles"></canvas>
</div>

    Add any styles you need to the wrapper ...