Handsontable example

by handsoncode

HTML

<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">

<button id="btnPrint">Print table</button>
<div id="example"></div>

Babel + JSX

const example = document.getElementById('example');
const hot = new Handsontable(example, {
  data: Handsontable.helper.createSpreadsheetData(100, 100),
  colWidths: 100,
  width: '100%',
  height: 320,
  rowHeights: 23,
  rowHeaders: true,
  colHeaders: true
});

document.getElementById('btnPrint').addEventListener('click', () => {
  const iframe = document.createElement('iframe');
  // we have to add an iframe to the document, otherwise, the browser will not generate the inner document
  // so to not show it in the layout you can set the display to none
  iframe.style.cssText = 'display: none';

  document.body.appendChild(iframe);
  const doc = iframe.contentDocument;

	// To convert Handsontable to its pure HTML form, you can use `.toHTML()` method.
  // Remember - it's a synchronous function - if you have thousands of rows, it might freeze the browser for a while.
  doc.open('text/html', 'replace');
  doc.write(`<!doctype html><html><head>
  <style>
    @media print {
      table {
        border-collapse: collapse;
      }
      th, td {
        border: 1px solid #ccc;
        min-width: 50px;
        padding: 2px 4px;
      }
      th {
        background-color: #f0f0f0;
        text-align: center;
        font-weight: 400;
        white-space: nowrap;
        -webkit-print-color-adjust: exact;
      }
    }
  </style>
  </head><body>${hot.toHTML()}</body></html>`);
  doc.close();
  
 	doc.defaultView.print();

  setTimeout(() => {
  	// this code will be executed 10ms after you close printing window
  	iframe.parentElement.removeChild(iframe);
  }, 10);
});