CDN: Problems to enable another language #1511

celsowm · 2025-05-24T16:30:50Z

celsowm
May 24, 2025

Hi !
I tried this code:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Editor de Planilhas XLSX</title>

  <!-- Handsontable 15.2.0 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@15.2.0/dist/handsontable.full.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/handsontable@15.2.0/dist/handsontable.full.min.js"></script>
  <!-- Dicionário pt‑BR em UMD -->
  <script type="module" src="https://cdn.jsdelivr.net/npm/handsontable@15.2.0/i18n/languages/pt-BR.mjs"></script>

  <!-- HyperFormula (engine de fórmulas) -->
  <script src="https://cdn.jsdelivr.net/npm/hyperformula@2.7.0/dist/hyperformula.full.min.js"></script>

  <!-- SheetJS – UMD -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

  <!-- Estilo “look & feel” Excel -->
  <style>
    :root {
      --excel-border: #d0d0d0;
      --excel-row-alt: #fafafa;
      --excel-header-bg: #f3f6ff;
    }
    body {
      font-family: "Segoe UI", Tahoma, sans-serif;
      margin: 20px;
    }
    h1 { font-size: 1.4rem; }
    #spreadsheet {
      border: 1px solid var(--excel-border);
      box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
    }
    /* grade */
    .ht_master .htCore td,
    .ht_master .htCore th {
      border: 1px solid var(--excel-border);
    }
    /* zebrado */
    .ht_master .htCore tr:nth-child(even) td {
      background-color: var(--excel-row-alt);
    }
    /* cabeçalhos */
    .ht_clone_top th,
    .ht_clone_left th {
      background: var(--excel-header-bg);
      font-weight: 600;
    }
    /* layout */
    .container { max-width: 100%; }
    #fileInput { margin: 12px 0 20px; }
    #saveButton { margin-top: 16px; }
  </style>
</head>

<body>
  <h1>Leitor e Editor de Planilhas XLSX</h1>
  <div class="container">
    <input type="file" id="fileInput" accept=".xlsx" />
    <button id="saveButton">Salvar Planilha</button>
    <div id="spreadsheet"></div>
  </div>

  <!-- Script principal (padrão, sem módulo) -->
  <script>
    // Verifica se o dicionário pt‑BR foi carregado (defensivo)
    if (!Handsontable.languages.getLanguageDictionary('pt-BR')) {
      console.warn('Dicionário pt-BR não pôde ser inicializado. Verifique a URL do script.');
    }

    let hot;              // instância Handsontable
    let workbookData;     // workbook SheetJS original, p/ salvar de volta

    const container  = document.getElementById('spreadsheet');
    const fileInput  = document.getElementById('fileInput');
    const saveButton = document.getElementById('saveButton');

    /* ========= Carregar XLSX ========= */
    fileInput.addEventListener('change', async ({ target }) => {
      const file = target.files[0];
      if (!file) return;

      // lê o arquivo via Web File API
      const data      = new Uint8Array(await file.arrayBuffer());
      const workbook  = XLSX.read(data, { type: 'array' });
      const sheetName = workbook.SheetNames[0];
      const worksheet = workbook.Sheets[sheetName];

      const jsonData  = XLSX.utils.sheet_to_json(worksheet, { header: 1, raw: false });

      /* cria ou recarrega o grid */
      if (!hot) {
        hot = new Handsontable(container, {
          data: jsonData,
          rowHeaders: true,
          colHeaders: true,
          language: 'pt-BR',
          licenseKey: 'non-commercial-and-evaluation',

          // engine de fórmulas
          formulas: { engine: HyperFormula },

          contextMenu: [
            'row_above', 'row_below',
            'col_left', 'col_right',
            'remove_row', 'remove_col',
            'undo', 'redo'
          ],
        });
      } else {
        hot.loadData(jsonData);
      }

      workbookData = workbook; // guarda p/ salvar depois
    });

    /* ========= Salvar ========= */
    saveButton.addEventListener('click', () => {
      if (!workbookData || !hot) {
        alert('Nenhuma planilha carregada.');
        return;
      }

      const dataMatrix   = hot.getData();                // dados editados
      const sheetName    = workbookData.SheetNames[0];
      workbookData.Sheets[sheetName] = XLSX.utils.aoa_to_sheet(dataMatrix);

      const excelArray   = XLSX.write(workbookData, { bookType: 'xlsx', type: 'array' });
      const blob         = new Blob([excelArray], { type: 'application/octet-stream' });

      const url = URL.createObjectURL(blob);
      const a   = Object.assign(document.createElement('a'), { href: url, download: 'planilha_editada.xlsx' });
      a.click();
      URL.revokeObjectURL(url);
    });
  </script>
</body>
</html>

But I got this error:

Language with code "pt-BR" was not found. You should register particular language before using it. Read more about this issue at: https://docs.handsontable.com/i18n/missing-language-code.

Can anyone help me?

adrianszymanski89 · 2025-05-26T07:51:42Z

adrianszymanski89
May 26, 2025
Maintainer

Hi @celsowm

Thank you for contacting us. Here's an example based on the guide from our documentation: https://jsfiddle.net/h3nw1bqy/

Please check it and let me know if that helped. If not, please share a code demo where the problem can be replicated.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

CDN: Problems to enable another language #1511

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

CDN: Problems to enable another language #1511

Uh oh!

celsowm May 24, 2025

Replies: 1 comment

Uh oh!

adrianszymanski89 May 26, 2025 Maintainer

celsowm
May 24, 2025

adrianszymanski89
May 26, 2025
Maintainer