[英]Print a very wide HTML table without clipping right hand side
I have a table with several columns. 我有一个包含多个列的表。
When you print such table, the columns on right will not print, not even when you print in landscape orientation. 打印此类表时,右侧的列将无法打印,即使以横向打印也不会打印。
The browser should print entire table, use multiple sheets if necessary. 浏览器应打印整个表格,必要时使用多张表格。 CSS/JavaScript solutions are acceptable.
CSS / JavaScript解决方案是可以接受的。
Click the print button in the following demo. 单击以下演示中的打印按钮。 Look at the right hand side of page in print preview window.
在打印预览窗口中查看页面的右侧。
$(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>
Here is my go at this: 这是我的目的:
What I did was: 我做的是:
Example: if the table is 2000px wide and page width is set to 600px then y should be 4 and x will be 0, 600, 1200 and 1800 . 示例:如果表格宽度为2000像素,页面宽度设置为600 像素 ,那么y应为4 , x将为0,600,1200和1800 。
使用
@media print{@page {size: landscape}}
The answer provided by @(Salman A) worked well for me on Chrome and Firefox. @(Salman A)提供的答案在Chrome和Firefox上运行良好。 I modified it to break at column boundaries with the following:
我使用以下内容将其修改为在列边界处中断:
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);
};
See this question: Print Stylesheets for pages with long horizontal tables 请参阅此问题: 打印具有长水平表的页面的样式表
The point is that you can't get a browser to print horizontal tables the same way as excel does. 关键是你无法让浏览器以与excel相同的方式打印水平表。 You have to switch to something that is at most one page wide.
您必须切换到最多一页宽的内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.