显示预览线

通常，在打印任何报告数据之前，用户倾向于预览执行打印作业后文档的外观。使用“打印预览”对话框可以完成此操作，该对话框有助于识别，查看和修复任何潜在的页面布局故障。但是，不幸的是，“打印预览”对话框只能生成整个表单的预览，而不允许用户预览和打印特定数据。

SpreadJS允许用户显示预览行以进行打印，以便根据其自定义要求仅打印所需的数据。此功能特别有用，特别是当您使用大型表单但只想在不同页面上打印特定数据块（或单元格区域）时。

用户可以使用 isPrintLineVisible() 方法的 Worksheet 类，以获取或设置是否在表单中显示预览行。

示例

例如，假设您正在开发一个营销应用程序，其中包含产品销售信息和来自不同地区的其他统计数字。现在，您想在不同页面上打印不同地区的销售数据。在这种情况下，检查和预览选择打印的数据是否将在正确的页面上打印就变得很重要。通过显示打印预览行，用户可以在特定页面上正确打印所需的数据。

下面显示了显示预览行以进行打印的示例图像。当用户将起始行设置为2，将起始列设置为1，将结束行设置为6，将结束列设置为4时；将显示预览行以指示打印区域为B3：E7。

代码

请参考以下代码以显示预览行以进行打印。

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<link href="css/gc.spread.sheets.excel2013white.12.2.0.css" rel="stylesheet" />
<script src="scripts/gc.spread.sheets.all.12.2.0.min.js"></script>
<script src="scripts/gc.spread.sheets.print.12.2.0.min.js"></script>
<script>
$(document).ready(function ()
{
// 初始化 spread
 var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'),
{ sheetCount: 1 });
spread.suspendPaint();

// 获取表单
 var sheet = spread.getActiveSheet();
sheet.setRowCount(600);
sheet.setColumnCount(80);

// 设置值
 for (var r = 0, rc = sheet.getRowCount() + 150; r < rc; r++) {
for (var c = 0, cc = sheet.getColumnCount() + 20; c < cc; c++) {
sheet.setValue(r, c, r + c);
}
}

// 设置打印信息
 var printInfo = sheet.printInfo();
spread.resumePaint();
$("#print").click(function () {
spread.print();
});
$("#printLine").click(function () {
var activeSheet = spread.getActiveSheet();
var isDisplayPrintLine = activeSheet.isPrintLineVisible();
activeSheet.isPrintLineVisible(!isDisplayPrintLine);
});
$("#updatePrintInfo").click(function () {
var activeSheet = spread.getActiveSheet();
var printInfo = activeSheet.printInfo();
var startRow = parseInt(document.getElementById("startRow").value);
var endRow = parseInt(document.getElementById("endRow").value);
var startColumn = parseInt(document.getElementById("startColumn").value);
var endColumn = parseInt(document.getElementById("endColumn").value);
printInfo.rowStart(startRow);
printInfo.rowEnd(endRow)
printInfo.columnStart(startColumn);
printInfo.columnEnd(endColumn);
});
});
</script>
</head>
<body>
<table>
<tr>
<td>StartRow: </td>
<td> <input id="startRow" type="text" value="0" /> </td>
</tr>
<tr>
<td>StartColumn: </td>
<td><input id="startColumn" type="text" value="0" /> </td>
</tr>
<tr>
<td>EndRow: </td>
<td> <input id="endRow" type="text" value="12" /> </td>
</tr>
<tr>
<td>EndColumn: </td>
<td> <input id="endColumn" type="text" value="12" /> </td>
</tr>
</table>
<div style=" margin-top:10px">
<input type="button" id="updatePrintInfo" value="Update PrintInfo">
<input type="button" style=" margin-left:16px" id="printLine" value="Print Line">
<input type="button" style=" margin-left:16px" id="print" value="Print">
</div>
<div id="ss" style="height:650px;width:1000px; margin-top:20px"></div>
</body>
</html>