window.print（）设置一个适合页面

Question

这就是我看HTML的方式：

为了打印我在JavaScript中使用window.print()功能的页面。

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

在下一张图片中是我的打印预览。在打印预览中，表格超出了页面的宽度。如何在表格中放置表格？

Answer 1

您可以使用css解决此问题，为您的打印版本设置新样式，使用media print

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

Answer 2

我找到了一个解决方案，使用javascript，这是我的代码：

    $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();
}