This is how it looks my HTML:

In order to print the page I am using in JavaScript the window.print() function.

$scope.print= function() {
    $("#tab2-panel-tools").hide();
    $("#title-row").hide();
    window.print();
    $("#tab2-panel-tools").show();
    $("#title-row").show();
}

In the next image is my print preview. In the print preview the table exceed the width of the page. How can I fit the table in the page?

This is how it looks my HTML:

In order to print the page I am using in JavaScript the window.print() function.

$scope.print= function() {
    $("#tab2-panel-tools").hide();
    $("#title-row").hide();
    window.print();
    $("#tab2-panel-tools").show();
    $("#title-row").show();
}

In the next image is my print preview. In the print preview the table exceed the width of the page. How can I fit the table in the page?

• javascript
• html

• Make a pdf in landscape – mplungjan Commented Jan 26, 2018 at 13:30
• Make it smaller? – Liam Commented Jan 26, 2018 at 13:31
• How can I make it smaller only in the print preview? – Wekerle Tibor Commented Jan 26, 2018 at 13:33
• Change the scale in settings (click more settings on the left) to print it smaller. Would be better in landscape -- change it in settings too. – ild flue Commented Jan 26, 2018 at 13:36

2 Answers 2

You can solve it with css, to set a new style for your printed versions, use media print

@media print {
  table{
    font-size: 10px;//customize your table so they can fit
  }
}

I found a solution, using javascript, here is my code:

    $scope.print= function() {
    var nrColumns = $("#reportPrintPreviewTableBody tr:first td").length;
    //here I can put as many "if"-s as I need
    if (nrColumns >= 14) {
        $("#reportPrintPreviewTable").css("font-size", "10px");
    }else if (nrColumns >= 10) {
        $("#reportPrintPreviewTable").css("font-size", "14px");
    }

    //$("#reportPrintPreviewTable").css("height", "100%");
    $("#tab2-panel-tools").hide();
    $("#title-row").hide();
    window.print();
    $("#reportPrintPreviewTable").css("font-size", "11px");
    $("#tab2-panel-tools").show();
    $("#title-row").show();
}