
# Landscape Report Printing

You can easily convert grid data and layouts into printable reports using [GridReportViewer](https://realreport.co.kr/docs/viewer/grid-report/01-install).

Additional demos and documentation are available on the [RealReport](https://realreport.co.kr/) website.

Grid report printing outputs the values displayed on the screen as they are in the report.

Setting paper.orientation to landscape allows you to print in landscape orientation.

(Safari allows you to set the paper orientation directly in the print preview.)


```js
const fields = [
  { fieldName: 'OrderID', dataType: 'text' },
  { fieldName: 'CustomerID', dataType: 'text' },
  { fieldName: 'EmployeeID', dataType: 'text' },
  { fieldName: 'OrderDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'CompanyName', dataType: 'text' },
  { fieldName: 'Country', dataType: 'text' },
  { fieldName: 'Phone', dataType: 'text' },
  { fieldName: 'ProductName', dataType: 'text' },
  { fieldName: 'QuantityPerUnit', dataType: 'text' },
  { fieldName: 'Quantity', dataType: 'number' },
  { fieldName: 'UnitPrice', dataType: 'number' },
];

const columns = [
  { name: 'Country', fieldName: 'Country', type: 'data', width: '100', header: { text: 'Country' } },
  { name: 'CompanyName', fieldName: 'CompanyName', type: 'data', width: '180', header: { text: 'Company Name' } },
  { name: 'UnitPrice2', fieldName: 'UnitPrice', type: 'data', width: '100', renderer: { type: 'bar', origin: 'left', barWidth: '80%' }, header: { text: 'UnitPrice2' } },
  { name: 'OrderID', fieldName: 'OrderID', type: 'data', width: '80', header: { text: 'Order ID' } },
  { name: 'CustomerID', fieldName: 'CustomerID', type: 'data', width: '90', header: { text: 'Customer ID' } },
  { name: 'EmployeeID', fieldName: 'EmployeeID', type: 'data', width: '90', header: { text: 'Employee ID' } },
  { name: 'OrderDate', fieldName: 'OrderDate', type: 'data', width: '130', header: { text: 'Order Date' } },
  { name: 'Phone', fieldName: 'Phone', type: 'data', width: '90', renderer: { type: 'button' }, header: { text: 'Button' } },
  { name: 'Phone2', fieldName: 'Phone', type: 'data', width: '90', header: { text: 'Phone2' } },
  { name: 'ProductName', fieldName: 'ProductName', type: 'data', width: '200', header: { text: 'Product Name' } },
  { name: 'QuantityPerUnit', fieldName: 'QuantityPerUnit', type: 'data', width: '100', header: { text: 'Quantity / Unit' } },
  { name: 'Quantity', fieldName: 'Quantity', type: 'data', width: '100', header: { text: 'Quantity' } },
  { name: 'UnitPrice', fieldName: 'UnitPrice', type: 'data', width: '100', header: { text: 'Unit Price' } },
  { name: 'Country2', fieldName: 'Country', type: 'data', width: '100', header: { text: 'Country2' } },
];

const layout1 = [
  {
    name: 'companyGroup',
    direction: 'horizontal',
    items: ['Country', 'CompanyName'],
    header: { text: 'Company' },
  },
  { column: 'UnitPrice2', visible: false },
  { column: 'Phone2', visible: false },
  { column: 'Country2', visible: false },
  { column: 'ProductName', visible: false },
  { column: 'Quantity', visible: false },
  { column: 'UnitPrice', visible: false },
  { column: 'QuantityPerUnit', visible: false },
  {
    name: 'orderGroup',
    direction: 'horizontal',
    items: ['OrderID', 'CustomerID'],
    header: { text: 'Order' },
  },
  'EmployeeID',
  'OrderDate',
];

const reportOptions = {
  paper: {
    orientation: 'landscape',
  },
  title: {
    text: 'Print Landscape Report',
    top: '20px',
    styles: {
      fontFamily: 'Arial',
      fontwhenze: '3em',
      fontWeight: '700',
      borderBottom: '2px solid blue',
    },
  },
  subTitle: {
    text: '',
    top: '70px',
    styles: {
      fontwhenze: '14px',
      fontStyle: 'italic',
      paddingTop: '30px',
      paddingBottom: '30px',
    },
  },
  pageHeader: {
    items: [
      { value: '${page}', top: '0', right: '20px' },
      { top: '0', text: '/', right: '10px' },
      { value: '${pages}', right: '0', top: '0' },
    ],
  },
  gridHeader: {
    items: [
      { text: 'First Half', left: '0', styles: { fontwhenze: '14px' } },
      { text: new Date().toLocaleDateString('en-CA'), right: '0px', styles: { color: 'blue' } },
    ],
  },
  pageFooter: {
    items: [{ value: '${page}', align: 'center' }],
  },
  layout: { autoWidth: false },
};

let gridReportWindowPopup = null;

function onGridReportPreviewPopup() {
  const w = Math.min(screen.width, 1024);
  const h = Math.min(screen.height, 768);
  const x = (screen.width - w) / 2;
  const y = (screen.height - h) / 2;
  const options = 'left=' + x + ',top=' + y + ',width=' + w + ',height=' + h;

  if (gridReportWindowPopup === null || gridReportWindowPopup.closed) {
    gridReportWindowPopup = window.open('./preview.html', 'print', options);
    gridReportWindowPopup.gridView = gridView;
    gridReportWindowPopup.dataProvider = dataProvider;
    gridReportWindowPopup.reportOptions = reportOptions;
    gridReportWindowPopup.onload = () => {
      const gridReportPreviewFn = gridReportWindowPopup['previewGridReport'];
      gridReportPreviewFn(gridView, reportOptions);
      gridReportWindowPopup.window.hidePrintPopup();
    };
  } else {
    const gridReportPreviewFn = gridReportWindowPopup['previewGridReport'];
    gridReportPreviewFn(gridView, reportOptions);
    gridReportWindowPopup.window.hidePrintPopup();
    gridReportWindowPopup.focus();
  }
}

function setAutoWidth() {
  reportOptions.layout.autoWidth = document.getElementById('reportAutoWidth').checked;
}

const { gridView, dataProvider } = RealGrid.createGrid('realgrid', {
  columns,
  header: {
    height: 40,
  },
  display: {
    rowHeight: 36,
    emptyMessage: 'No data to display.',
  },
  footer: {
    visible: false,
    height: 40,
  },
  checkBar: {
    visible: false,
  },
  stateBar: {
    visible: false,
    width: 16,
  },
  onInitialized: (grid) => {
    grid.setColumnLayout(layout1);
    fetch('/data/en/editor_demoData.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  },
}, {
  fields,
});

window.gridView = gridView;
window.dataProvider = dataProvider;
```

```js
var reportOptions ={
  paper:{
    orientation: "landscape" //orientation landscape
  },
    title: {
        text: '그룹컬럼 리포트 출력',
        top: '20px',
        styles: {
            fontFamily: 'Arial',
            fontSize: '3em',
            fontWeight: '700',
            borderBottom: '2px solid blue',
        },
    },
    subTitle: {
        text: '',
        top: '70px',
        styles: {
            fontSize: '14px',
            fontStyle: 'italic',
            paddingTop: '30px',
            paddingBottom: '30px',
        },
    },
    ...
}

document.addEventListener('DOMContentLoaded', function () {
    const viewer = new RealReport.GridReportViewer (
            "realreport",
            gridView,
            reportOptions
        );
    viewer.preview()
})
```