How to output data from excel to html file?

Question

HTML

A form with a data entry field has been created, in this field I enter the article number of the product. I have an Excel file that contains all the articles and information on them. How can I display information from Excel (everything that is on the article searched for by the user) on the screen (preferably in the same table)?

Answer 1

If you have a php site, then create a test.php file in the root with the following content:

spoiler

<?php

header('Access-Control-Allow-Origin: *');

header('Content-Description: File Transfer');
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename=archive.zip');
header('Content-Transfer-Encoding: binary');
header('Expires: 0');
header('Cache-Control: must-revalidate');
header('Pragma: public');

echo file_get_contents('https://docs.google.com/spreadsheets/d/1LCPXEorv3x5YYiikpciI0A2YaPNB41Epn-9JKMdW94/export?format=zip');

Of course, replace the link to export the table with your own! Let's say you have a link to a Google spreadsheet:

https://docs.google.com/spreadsheets/d/1LCPXEorv3x5YYiikpciI0A2YaPNB41Epn-9JKMdW94/edit

You need to change edit to export?format=zip at the end to get:

https://docs.google.com/spreadsheets/d/1LCPXEorv3x5YYiikpciI0A2YaPNB41Epn-9JKMdW94/export?format=zip

If you follow such a link, you will see that you are given a zip-archive inside which are html-files. Accordingly, the task further boils down to unpacking the resulting zip archive and parsing html files.
To parse information, on the site itself, before the closing tag, </head>insert:

spoiler

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.js"></script>

<script type="text/javascript"> 

  // Функция для парсинга Google таблицы:

  async function googleTableParse() {
    
    var response = await fetch('/test.php');
    var zip = await response.blob();
    var archive = await new JSZip().loadAsync(zip);
    var files = Object.keys(archive.files);
    var lists = Object.create(null);
    for (var n = 0; n < files.length; n++) {
      if (!files[n].includes('/') && files[n].includes('.html')) {
        var blob = await archive.files[files[n]].async('blob');
        var html = await blob.text();
        var name = files[n].replace(/\.html$/g, '');
        lists[name] = tableParser(html);
      }
    }
    
    return lists;
    
  }

  // Функция для парсинга html-кода таблицы:

  function tableParser(html) {
    
    var doc = new DOMParser().parseFromString(html, "text/html");
    
    var th = doc.querySelector('table > tbody > tr').querySelectorAll('th, td');

    var title = [];

    for (var i = 0; i < th.length; i++) {

      title.push(th[i].innerText);

    }
    
    var tr = doc.querySelectorAll('table > tbody > tr');
    
    var array = [];
    
    for (var i = 1; i < tr.length; i++) {

      var td = tr[i].querySelectorAll('th, td');
      
      var obj = {};
      var add = 0;
      
      for (var y = 1; y < td.length; y++) {
        
        td[y].innerHTML = td[y].innerHTML.replace(/\<br\>/g, '{перенос строки}');
        obj[title[y]] = td[y].innerText.replace(/\{перенос строки\}/g, "\n").trim();
        if (obj[title[y]] !== '') {
          add = 1;
        }
        
      }
      
      if (add) {
        array.push(obj);
      }

    }
    
    return array;
    
  }

</script>

Next, go to your site, open the console and, for the purposes of the test, execute: If an object with data has fallen into the test variable , then everything is in order, you can use it.
test = await googleTableParse();