I want to Display Excel As HTML In js

Joined
Feb 24, 2023
Messages
1
Reaction score
0
hi in my code do this
1. i have a form and the user can upload excel files.
2. i check if the file is excel
3. if the files is excel then be visible in html
4. then user can delete a line or change something
5. i have and search if the user want to find something

but i dont know how to do this i want all the changes from the html page to be saved to excel file in the desktop of user in real time
here is my code

HTML:
<!DOCTYPE html>
<html>
<head>
 <title>UploadyourExcel</title>
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
 <link rel="stylesheet" href="index.css">
 <script>
  $(function() {
   $('#file-input').on('change', function(e) {
    var file = e.target.files[0];
    var filename = file.name;
    var extension = filename.split('.').pop().toLowerCase();
    if (extension != 'xlsx') {
     $('#error-message').text('File must be an Excel file (.xlsx)');
     $('#preview').empty();
     $('#search-bar').hide();
     return;
    }

    $('#error-message').empty();

    var reader = new FileReader();
    reader.onload = function(e) {
     var data = new Uint8Array(e.target.result);
     var workbook = XLSX.read(data, { type: 'array' });
     var sheet_name_list = workbook.SheetNames;
     var html = XLSX.utils.sheet_to_html(workbook.Sheets[sheet_name_list[0]], {editable:true});
     $('#preview').html(html);

    
     $('#preview tr').each(function() {
      $(this).append('<td><button class="delete-row" type="button" style="display:none">x</button></td>');
     });

 
     $('#preview tr').hover(function() {
      $(this).find('.delete-row').show();
     }, function() {
      $(this).find('.delete-row').hide();
     });

    
     $('.delete-row').click(function() {
      var row = $(this).closest('tr');
      row.remove();
     });

    
     $('#preview td[contenteditable]').on('blur', function() {
      var cell = $(this);
      var value = cell.text();
      var sheet = workbook.Sheets[sheet_name_list[0]];
      var address = cell.attr('data-address');
      sheet[address].v = value;
      XLSX.writeFile(workbook, filename);
     });

    
     $('#search-bar').show();
     $('#search-bar input[type="text"]').on('keyup', function() {
      var value = $(this).val().toLowerCase();
      $('#preview tr').filter(function() {
       $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
      });
     });

    };
    reader.readAsArrayBuffer(file);
   });
  });
 </script>
</head>
<body>
 <h1>Ανέβασε το αρχείο σου:</h1>
 <form>
  <label for="file-input"></label>
  <input type="file" id="file-input" accept=".xlsx">
 </form>
 <div id="error-message"></div>
 <div id="search-bar" style="display:none">
  <input type="text" placeholder="Αναζήτηση">
 </div>
 <div id="preview"></div>
</body>
 
Joined
Mar 5, 2023
Messages
36
Reaction score
12
To save changes made in the HTML table to the Excel file in real time, you can modify the blur event handler on the editable cells to save the updated workbook to the local file system using the FileSaver.js library. Here's an example code snippet that demonstrates how to do this:

Less:
$('#preview td[contenteditable]').on('blur', function() {
  var cell = $(this);
  var value = cell.text();
  var sheet = workbook.Sheets[sheet_name_list[0]];
  var address = cell.attr('data-address');
  sheet[address].v = value;
  // save the updated workbook to the local file system
  var blob = new Blob([XLSX.write(workbook, { bookType: 'xlsx', type: 'binary' })], { type: 'application/octet-stream' });
  saveAs(blob, filename);
});

This code creates a Blob object containing the updated workbook data, and then uses the saveAs function from the FileSaver.js library to save the blob as a file with the original filename.

You will need to include the FileSaver.js library in your HTML file by adding the following script tag to your head section:

PHP:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/FileSaver.min.js"></script>

Note that this implementation will prompt the user to download the updated file each time they make a change to the table. If you want to save the changes automatically without user intervention, you will need to modify the code to save the file periodically or when certain conditions are met.

Let me know if you have any questions.
 
Joined
Dec 23, 2023
Messages
3
Reaction score
0
Hello,
Can I do this with MS Document?
My main goal is user can edit the document on my website and if they give this placeholder {name} then after uploading the MS Document file to my website a Form should be displayed...
that taking the input from user as their name which is given by the user a while ago in the document; after prompting enter your name that name should be written in the {name} placeholder in the document and also that document get downloaded to the user's phone, computer..

Please Help me give some Idea
How I can achieve this??
Thank You for Reading 🙏
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,708
Messages
2,569,348
Members
44,663
Latest member
XiomaraBla

Latest Threads

Top