Bagaimana cara import data dari excel menggunakan javascript?

Artikel ini menunjukkan cara menampilkan data Excel dalam tabel HTML menggunakan SheetJS dalam Javascript. SheetJS adalah perpustakaan javascript yang digunakan untuk bekerja dengan berbagai format spreadsheet. Di artikel lain, kami menjelaskan Konversi data file Excel ke JSON menggunakan library SheetJS di Javascript. Hari ini di artikel ini, kami akan menjelaskan cara menampilkan data spreadsheet Excel dalam tabel HTML menggunakan javascript

Table of Contents Show

Perpustakaan SheetJS
Bagaimana cara menggunakan SheetJS?
Bagaimana cara menampilkan data Excel di Tabel HTML menggunakan Javascript?
1. Tentukan HTML
2. Termasuk perpustakaan SheetJS
3. Tulis logika Javascript untuk mengunggah dan memvalidasi file Excel
4. Baca data Excel ke dalam format JSON menggunakan Javascript
5. Konversikan data JSON ke Tabel HTML menggunakan Javascript
Menampilkan data Excel di Tabel HTML [contoh kode lengkap]
Tes dan Demo Langsung
Bisakah JavaScript berinteraksi dengan excel?
Bagaimana cara mengakses file excel di JavaScript?
Bagaimana cara membuka file excel di browser menggunakan JavaScript?
Bagaimana cara mengimpor data dari excel ke HTML?

Disini terlebih dahulu kita mengubah data Excel menjadi format JSON kemudian data JSON akan ditampilkan dalam format tabel HTML. Mari kita lihat bagaimana hal itu bisa dilakukan

Daftar isi

Perpustakaan SheetJS

SheetJS adalah perpustakaan yang kuat yang ditulis dalam Javascript murni. Ini adalah Parser dan penulis untuk berbagai format spreadsheet

Bagaimana cara menggunakan SheetJS?

Karena ini adalah pustaka javascript, kami harus memasukkannya ke dalam dokumen HTML untuk menggunakan pustaka ini. Ada berbagai link CDN yang bisa digunakan untuk memasukkannya. Mari kita lihat salah satu tautan CDN di bawah ini

Perpustakaan. xlsx. min. Tautan jsCDN. https. //cdnjs. cloudflare. com/ajax/libs/xlsx/0. 17. 5/xlsx. min. js

Now let’s see the below script that we have to include in the tag of the HTML document,

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.min.js"></script>

Bagaimana cara menampilkan data Excel di Tabel HTML menggunakan Javascript?

Ikuti langkah-langkah di bawah ini untuk menampilkan data excel di tabel HTML

Tentukan HTML
Termasuk perpustakaan SheetJS
Tulis logika Javascript untuk mengunggah dan memvalidasi file excel
Baca data Excel ke dalam format JSON
Konversikan data JSON ke tabel HTML

1. Tentukan HTML

First, we will define the HTML to allow users to upload an Excel file and display it in tabular format. We will define an HTML <input> tag with type=”file” to choose an excel file. And a <button> tag to upload the file and an HTML

tag to display the data.

Mari tentukan kode HTML di bawah ini dalam file dokumen HTML

<h1>Upload an excel file to display in HTML Table</h1>
<!-- Input element to upload an excel file -->
<input type="file" id="file_upload" />
<button onclick="upload()">Upload</button>  
<br><br>
<!-- table to display the excel data -->
<table id="display_excel_data"></table>

2. Termasuk perpustakaan SheetJS

Sertakan tautan CDN perpustakaan xlsx. min. js di tag

<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.min.js"></script>
</head>

0 dari file HTML seperti berikut

<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.min.js"></script>
</head>

3. Tulis logika Javascript untuk mengunggah dan memvalidasi file Excel

Kami akan menentukan metode javascript

<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.min.js"></script>
</head>

_1 untuk mengunggah dan memvalidasi file Excel. Metode

<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.min.js"></script>
</head>

1 akan memungkinkan pengguna mengunggah file excel yang valid saja. Mari kita lihat logika di bawah ini yang harus kita tulis di tag

<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.min.js"></script>
</head>

// Method to upload a valid excel file
function upload() {
  var files = document.getElementById('file_upload').files;
  if(files.length==0){
    alert("Please choose any file...");
    return;
  }
  var filename = files[0].name;
  var extension = filename.substring(filename.lastIndexOf(".")).toUpperCase();
  if (extension == '.XLS' || extension == '.XLSX') {
      //Here calling another method to read excel file into json
      excelFileToJSON(files[0]);
  }else{
      alert("Please select a valid excel file.");
  }
}

4. Baca data Excel ke dalam format JSON menggunakan Javascript

Kami telah menetapkan metode javascript

<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.min.js"></script>
</head>

4 yang akan membaca file excel dan mengubah data menjadi format JSON. Di dalam

<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.min.js"></script>
</head>

_4, kami telah membaca data file excel dengan menggunakan pembaca file sebagai string biner menggunakan metode

<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.min.js"></script>
</head>

6. Setelah itu, kami menggunakan XLSX yang memiliki fasilitas bawaan untuk mengubah string biner kami menjadi objek JSON. Dan metode

<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.min.js"></script>
</head>

7 digunakan untuk membaca data sheet di JSON

Mari kita lihat kode di bawah ini

//Method to read excel file and convert it into JSON 
function excelFileToJSON(file){
		  try {
			var reader = new FileReader();
			reader.readAsBinaryString(file);
			reader.onload = function(e) {

				var data = e.target.result;
				var workbook = XLSX.read(data, {
					type : 'binary'
				});
				var result = {};
				var firstSheetName = workbook.SheetNames[0];
                //reading only first sheet data
				var jsonData = XLSX.utils.sheet_to_json(workbook.Sheets[firstSheetName]);
				alert(JSON.stringify(jsonData));
				//displaying the json result into HTML table
				displayJsonToHtmlTable(jsonData);
				}
			}catch(e){
				console.error(e);
			}
}

5. Konversikan data JSON ke Tabel HTML menggunakan Javascript

Sekarang kita telah mendefinisikan metode javascript

<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.min.js"></script>
</head>

8 untuk menampilkan data JSON ke dalam tabel HTML

Mari kita lihat kodenya

//Method to display the data in HTML Table
function displayJsonToHtmlTable(jsonData){
		var table=document.getElementById("display_excel_data");
		if(jsonData.length>0){
			var htmlData='<tr><th>Student Name</th><th>Address</th><th>Email ID</th><th>Age</th></tr>';
			for(var i=0;i<jsonData.length;i++){
				var row=jsonData[i];
				htmlData+='<tr><td>'+row["Student Name"]+'</td><td>'+row["Address"]
				      +'</td><td>'+row["Email ID"]+'</td><td>'+row["Age"]+'</td></tr>';
			}
			table.innerHTML=htmlData;
		}else{
			table.innerHTML='There is no data in Excel';
		}
}

Menampilkan data Excel di Tabel HTML [contoh kode lengkap]

Mari kita lihat kode lengkapnya di bawah ini (letakkan semua kode di atas dalam satu file HTML)

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">  
	<title>Excel to HTML Table | Javacodepoint</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.min.js"></script>    
  </head>
  <body>
  	<h1>Upload an excel file to display in HTML Table</h1>
	<!-- Input element to upload an excel file -->
    <input type="file" id="file_upload" />
    <button onclick="upload()">Upload</button>	
    <br>
    <br>
	<!-- table to display the excel data -->
	<table id="display_excel_data" border="1"></table>
    <script>
	
      // Method to upload a valid excel file
	  function upload() {
		var files = document.getElementById('file_upload').files;
		if(files.length==0){
		  alert("Please choose any file...");
		  return;
		}
		var filename = files[0].name;
		var extension = filename.substring(filename.lastIndexOf(".")).toUpperCase();
		if (extension == '.XLS' || extension == '.XLSX') {
			//Here calling another method to read excel file into json
			excelFileToJSON(files[0]);
		}else{
			alert("Please select a valid excel file.");
		}
	  }
	  
	  //Method to read excel file and convert it into JSON 
	  function excelFileToJSON(file){
		  try {
			var reader = new FileReader();
			reader.readAsBinaryString(file);
			reader.onload = function(e) {

				var data = e.target.result;
				var workbook = XLSX.read(data, {
					type : 'binary'
				});
				var result = {};
				var firstSheetName = workbook.SheetNames[0];
				//reading only first sheet data
				var jsonData = XLSX.utils.sheet_to_json(workbook.Sheets[firstSheetName]);
				//displaying the json result into HTML table
				displayJsonToHtmlTable(jsonData);
				}
			}catch(e){
				console.error(e);
			}
	  }
	  
	  //Method to display the data in HTML Table
	  function displayJsonToHtmlTable(jsonData){
		var table=document.getElementById("display_excel_data");
		if(jsonData.length>0){
			var htmlData='<tr><th>Student Name</th><th>Address</th><th>Email ID</th><th>Age</th></tr>';
			for(var i=0;i<jsonData.length;i++){
				var row=jsonData[i];
				htmlData+='<tr><td>'+row["Student Name"]+'</td><td>'+row["Address"]
				      +'</td><td>'+row["Email ID"]+'</td><td>'+row["Age"]+'</td></tr>';
			}
			table.innerHTML=htmlData;
		}else{
			table.innerHTML='There is no data in Excel';
		}
	  }
    </script>
  </body>
</html>

Tes dan Demo Langsung

Mari kita asumsikan contoh file Excel (students. xlsx) yang akan kita unggah. Seperti yang Anda lihat pada gambar di bawah file excel ini berisi data siswa (nama, alamat, id email, umur)

Mari kita lihat hasilnya setelah kita upload file excel di atas ke aplikasi ini

Demo Langsung

Kesimpulan

Dalam tutorial ini, Anda telah melihat bagaimana Anda menampilkan data file Excel dalam Tabel HTML menggunakan Javascript. Anda telah melihat di sini, yang dapat dengan mudah dilakukan dengan menggunakan perpustakaan SheetJS. Seperti yang telah Anda lihat, pustaka ini memiliki kemampuan untuk mengonversi string biner ke format JSON yang digunakan di sini untuk ditampilkan dalam tabel HTML

Bisakah JavaScript berinteraksi dengan excel?

Add-in Excel berinteraksi dengan objek di Excel menggunakan Office JavaScript API , yang mencakup dua model objek JavaScript. API JavaScript Excel. Diperkenalkan dengan Office 2016, Excel JavaScript API menyediakan objek yang sangat diketik yang bisa Anda gunakan untuk mengakses lembar kerja, rentang, tabel, bagan, dan lainnya.

Bagaimana cara mengakses file excel di JavaScript?

Ini dapat dilakukan dengan cukup mudah menggunakan SheetJS. impor {baca, tulisFileXLSX, utils} dari "https. // cdn. sheetjs. com/xlsx-0. 18. 7/paket/xlsx. mjs"; buku kerja const = read(data, { type. 'biner', });

Bagaimana cara membuka file excel di browser menggunakan JavaScript?

Solusi 1 . var newwindow=window. buka("url dari. xls","window1","");

Bagaimana cara mengimpor data dari excel ke HTML?

Pada menu File, klik Impor. Di kotak dialog Impor, klik opsi untuk jenis file yang ingin Anda impor, lalu klik Impor. Dalam kotak dialog Pilih File, temukan dan klik file CSV, HTML, atau teks yang ingin Anda gunakan sebagai rentang data eksternal, lalu klik Dapatkan Data