[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

미리보기 선 표시

일반적으로 보고서 데이터를 인쇄하기 전에 사용자는 인쇄 작업이 수행된 후 문서가 어떻게 보일지 미리 확인하고자 합니다. 이를 위해 Print Preview(인쇄 미리 보기) 대화 상자를 사용하여 페이지 레이아웃 문제를 식별하고, 보기 및 수정할 수 있습니다.

그러나 아쉽게도 Print Preview 대화 상자는 전체 워크시트에 대한 미리 보기만 생성할 수 있으며, 특정 데이터만 미리 보고 인쇄하는 기능은 제공하지 않습니다.

SpreadJS는 사용자가 인쇄을 위한 미리 보기 선(Preview Lines) 을 표시할 수 있도록 하여, 원하는 데이터만 사용자 지정 조건에 따라 인쇄할 수 있도록 지원합니다.

이 기능은 특히 워크시트가 크고, 그중 일부 범위의 셀만 서로 다른 페이지에 나눠 인쇄하고자 할 때 유용합니다.

사용자는 Worksheet 클래스의 isPrintLineVisible 메서드를 사용하여 워크시트에서 미리 보기 선을 표시할지 여부를 설정하거나 확인할 수 있습니다.


예시

예를 들어, 여러 지역의 제품 판매 정보 및 기타 통계 수치를 포함하는 마케팅 애플리케이션에서 작업 중이라고 가정해 보겠습니다.

이제 지역별 판매 데이터를 서로 다른 페이지에 나눠 인쇄하고자 할 때, 인쇄될 데이터가 올바른 페이지에 배치되는지 미리 확인하는 것이 중요합니다.

이때 인쇄 미리 보기 선을 표시하면, 사용자는 특정 데이터가 정확히 원하는 페이지에 인쇄되도록 확인할 수 있습니다.

아래 이미지는 인쇄 미리 보기 선이 표시된 예시를 보여줍니다.

사용자가 시작 행을 2, 시작 열을 1, 종료 행을 6, 종료 열을 4로 설정한 경우, 인쇄 영역은 B3:E7로 표시되며 해당 부분에 미리 보기 선이 나타납니다.




다음은 인쇄 미리 보기 선을 표시하는 방법을 보여주는 코드 샘플입니다:

$(document).ready(function ()
{
  //spread 초기화
  var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'),
  { sheetCount: 1 });
  spread.suspendPaint();

  // ActiveSheet 가져오기
  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);
  });
});