Tôi có một bảng có nhiều cột.In một bảng HTML rất rộng mà không cần cắt cạnh phải

CÁC VẤN ĐỀ CỤ THỂ

Khi bạn in bảng như vậy, các cột bên phải sẽ không in, không phải ngay cả khi bạn in theo chiều ngang.

THE BEHAVIOR DESIRED

Trình duyệt nên in toàn bộ bảng, sử dụng nhiều trang tính nếu cần. Các giải pháp CSS/JavaScript được chấp nhận.

mã ngắn nhất CẦN THIẾT ĐỂ tạo lại vấn đề

Nhấp vào nút in trong bản demo sau. Nhìn vào bên tay phải của trang trong cửa sổ xem trước bản in.

$(function() { 
 
    $("input:first").click(function() { 
 
    window.print(); 
 
    }); 
 
    $(".description").each(function() { 
 
    var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat malesuada sodales. Nulla convallis neque lorem, ac varius enim. Ut dapibus, orci at feugiat eleifend, dui mi lobortis tortor, ac egestas neque enim et neque. Donec tempus mi quis tellus dapibus eu blandit magna sagittis. Curabitur ac ultrices tortor. Aliquam id tincidunt urna. Nunc id neque ac urna congue convallis. Etiam eget massa vitae justo aliquam pulvinar vitae ut diam."; 
 
    text = text.substr(0, Math.ceil(Math.random() * 100)); 
 
    $(this).text(text); 
 
    }); 
 
    $(".number").each(function() { 
 
    var text = (Math.random() * 1000).toFixed(2); 
 
    $(this).text(text); 
 
    }); 
 
});

@media screen { 
 
    input { 
 
    width: 100%; 
 
    margin: 1em 0; 
 
    } 
 
} 
 
@media print { 
 
    input { 
 
    display: none; 
 
    } 
 
} 
 
th { 
 
    font: bold 12px sans-serif; 
 
    border: 1px solid; 
 
    white-space: nowrap; 
 
} 
 
td { 
 
    font: 12px sans-serif; 
 
    border: 1px dotted; 
 
} 
 
td.description { 
 
    min-width: 200px; 
 
    border-style: solid; 
 
} 
 
td.number { 
 
    padding-left: 20px; 
 
    text-align: right; 
 
    border-style: solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<input type="button" value="Print"> 
 

 
<table> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <th colspan="12">2009</th> 
 
    <th colspan="12">2010</th> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <th>Description</th> 
 
    <th>Jan</th> 
 
    <th>Feb</th> 
 
    <th>Mar</th> 
 
    <th>Apr</th> 
 
    <th>May</th> 
 
    <th>Jun</th> 
 
    <th>Jul</th> 
 
    <th>Aug</th> 
 
    <th>Sep</th> 
 
    <th>Oct</th> 
 
    <th>Nov</th> 
 
    <th>Dec</th> 
 
    <th>Jan</th> 
 
    <th>Feb</th> 
 
    <th>Mar</th> 
 
    <th>Apr</th> 
 
    <th>May</th> 
 
    <th>Jun</th> 
 
    <th>Jul</th> 
 
    <th>Aug</th> 
 
    <th>Sep</th> 
 
    <th>Oct</th> 
 
    <th>Nov</th> 
 
    <th>Dec</th> 
 
    <th>Total</th> 
 
    </tr> 
 
    <tr> 
 
    <th rowspan="2">Batch number 1</th> 
 
    <td rowspan="2" class="description"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    </tr> 
 
    <tr> 
 
    <th rowspan="4">Batch number 2</th> 
 
    <td rowspan="4" class="description"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    </tr> 
 
    <tr> 
 
    <th rowspan="4">Batch number 3</th> 
 
    <td rowspan="4" class="description"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    </tr> 
 
    <tr> 
 
    <th rowspan="2">Batch number 4</th> 
 
    <td rowspan="2" class="description"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    </tr> 
 
    <tr> 
 
    <th>Total</th> 
 
    <td class="description"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    </tr> 
 
</table>

Nguồn

2012-01-17 Salman A

Hãy thử @media in này {@page {kích thước: phong cảnh}} [Điều này sẽ giúp] [1] [1]: http://stackoverflow.com/questions/138422/landscape-printing-from-html – Narek

Nếu bạn đọc câu hỏi, định hướng ngang _even_ sẽ không hữu ích. Khi tôi hiểu câu hỏi, đó là liệu bạn có thể khiến trình duyệt in nội dung rất rộng trên nhiều trang - theo như tôi biết bạn không thể. – OlliM

đây không phải là "tại sao mã này không hoạt động?" câu hỏi, nó chắc chắn hỏi "Làm thế nào để", cho một chủ đề cụ thể, và nói với những gì OP điều tra và thử –

Đây là đường đi của tôi lúc này:

Demo và Code
Article

Những gì tôi đã làm là:

Tạo một div chiều rộng cố định phù hợp độc đáo trên một trang khổ A4
sao chép bảng bên trong mà div
Scroll bàn x pixel để mang lại phần mong muốn trong "tập trung" sử dụng CSS vị
Lặp lại quá trình này y lần

Ví dụ: nếu bảng được 2000px và trang rộng được thiết lập để 600px sau đó y nên và x sẽ 0, 600, 1200 và .

Nguồn

2013-04-29 12:30:28

Đây là giải pháp tuyệt vời. Nó hoạt động hoàn hảo! – Vaidas

Rất đẹp, nhưng không hoạt động trong IE – inon

Thật không may, giải pháp này sẽ tạo ra các ngắt trang chia nhỏ ngay giữa một cột. Excel đảm bảo rằng các cột không được chia thành các trang. – wrecks

sử dụng

@media print{@page {size: landscape}}

Nguồn

2012-01-17 17:26:47

Xem câu hỏi này: Print Stylesheets for pages with long horizontal tables

Vấn đề là rằng bạn không thể có được một trình duyệt để in bảng ngang theo cùng một cách như excel làm. Bạn phải chuyển sang thứ gì đó rộng tối đa một trang.

Nguồn

2012-03-05 15:28:42 OlliM

Câu trả lời được cung cấp bởi @ (Salman A) hoạt động tốt cho tôi trên Chrome và Firefox.Tôi sửa đổi nó để phá vỡ tại ranh giới cột như sau:

var acSplitTable = function() { 
    var table = $(".ac-print .ac-grid>table"), 
     tableWidth = table.outerWidth(), 
     pageWidth = 600, 
     pageCount = Math.ceil(tableWidth/pageWidth), 
     printWrap = $("<div></div>").insertAfter(table), 
     i, 
     printPage; 

    $(".ac-print .ac-grid>table .ac-hidden").remove(); 

    var positions = []; 
    var lastOuterWidth = 0; 
    $(".ac-print .ac-grid>table th").each(function() { 
     positions.push($(this).position().left); 
     lastOuterWidth = $(this).outerWidth; 
    }); 

    var pageWidths = []; 
    var endColumns = []; 

    var lastPosition = 0; 
    for (i = 1; i < positions.length; i++) { 
     if ((positions[i] - lastPosition) > pageWidth) { 
      pageWidths.push(positions[i - 1] - lastPosition); 
      lastPosition = positions[i - 1]; 
      endColumns.push(i - 1); 
     } 
     if (i == (positions.length - 1)) { 
      pageWidths.push(positions[i] + lastOuterWidth - lastPosition); 
      lastPosition = positions[i]; 
      endColumns.push(i); 
     } 
    } 
    pageCount = pageWidths.length; 

    var lastEndColumn = 0; 
    for (i = 0; i < pageCount; i++) { 
     var thisPageWidth = pageWidth; //pageWidths[i]; 
     var styleString = "overflow: hidden; width:" + thisPageWidth + "px; page-break-before: " + (i === 0 ? "auto" : "always") + ";"; 
     var newTable = table.clone().attr("id", "ac-print-page-" + i); 
     newTable.attr("style", styleString); 
     newTable.appendTo("#formpoint"); 

     //remove columns either side of our page 
     for (var j = positions.length - 1; j >= 0; j--) { 
      if (j > endColumns[i] || j <= lastEndColumn) { 
       var index = j + 1; 
       var heading = $(newTable).find("tr th:nth-child(" + index + ")"); 
       $(newTable).find("tr th:nth-child(" + index + ")").remove(); 
       $(newTable).find("tr td:nth-child(" + index + ")").remove(); 
      } 
     } 

     lastEndColumn = endColumns[i]; 
    } 

    table.hide(); 
    $(this).prop("disabled", true); 

    window.print(); 
    setTimeout(window.close, 0); 

};

Nguồn

2016-08-30 22:11:20

In một bảng HTML rất rộng mà không cần cắt cạnh phải

CÁC VẤN ĐỀ CỤ THỂ

THE BEHAVIOR DESIRED

mã ngắn nhất CẦN THIẾT ĐỂ tạo lại vấn đề

Trả lời

Các vấn đề liên quan