Konversi tabel HTML ke Excel menggunakan JavaScript

Programming

Oleh Vinci terakhir diubah pada 25 Juli 2022.

Mengonversi tabel HTML ke file Excel adalah persyaratan standar untuk situs web pelaporan. Jika konversi dilakukan di sisi klien, itu akan lebih sederhana dan lebih mudah.

Ada banyak plugin sisi klien dan sisi server untuk melakukan ekspor Excel. Misalnya, PHPSpreadSheet memungkinkan Anda untuk menulis dan mengekspor data di Excel.

Artikel ini menyajikan berbagai opsi dan pendekatan untuk memasukkan tabel HTML ke Excel dengan JavaScript.

Contoh sederhana ini berisi beberapa baris JavaScript yang membuat template untuk ekspor Excel.

Ini menggunakan yang berikut ini: Langkah-langkah konversi Laporan Excel diekspor dari data tabular.

  1. Mendefinisikan struktur template HTML dengan meta yang dibutuhkan.
  2. Tempelkan HTML bagian dalam tabel ke dalam template.
  3. Menandai lokasi dengan menentukan protokol untuk mengunduh file melalui browser.
  4. Redirect melalui JavaScript untuk menunjuk ke lokasi dengan konten Excel berkode.

Contoh cepat

Pengontrol JavaScript untuk mengatur format ekspor dan mendorong data tabel HTML.

function exportToExcel() {
	var location = 'data:application/vnd.ms-excel;base64,';
	var excelTemplate="<html> " +
		'<head> ' +
		'<meta http-equiv="content-type" content="text/plain; charset=UTF-8"/> ' +
		'</head> ' +
		'<body> ' +
		document.getElementById("table-conatainer").innerHTML +
		'</body> ' +
		'</html>'
	window.location.href = location + window.btoa(excelTemplate);
}

Tampilkan demo

Kode tabel HTML berikut menunjukkan daftar produk dan statis. Lihat contoh jsPDF AutoTables untuk merender tabel dinamis dengan pemuatan baris demi baris.

Tombol di bawah tabel ini mengaktifkan proses ekspor ke Excel di acara klik. partikel untuk objek langsung eksporKeExcel() Fungsi menangani acara dan melanjutkan ekspor sisi klien.

<div id="table-conatainer">
	<table class="striped">
		<thead>
			<tr>
				<th>S.No</th>
				<th>Product Name</th>
				<th>Price</th>
				<th>Model</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1q</td>
				<td>GIZMORE Multimedia Speaker with Remote Control, Black</td>
				<td>2300</td>
				<td>2020</td>
			</tr>
			<tr>
				<td>2</td>
				<td>Black Google Nest Mini</td>
				<td>3400</td>
				<td>2021</td>
			</tr>
		</tbody>
	</table>
</div>

tabel excel javascript html

Mari kita lihat lebih banyak opsi untuk mengonversi data tabel HTML ke file Excel.

Opsi 2: Ekspor sebagai CSV untuk dilihat di Excel

Contoh ini untuk mem-parsing konten tabel HTML melalui JavaScript. Ikuti langkah-langkah di bawah ini untuk mengekspor tabel HTML sebagai CSV.

  1. Akses objek elemen tabel HTML.
  2. Mengonversi objek menjadi larik data baris.
  3. Ulangi larik baris untuk mendapatkan nilai catatan yang dipisahkan koma.
  4. Atur protokol dan tipe konten untuk mengekspor data CSV yang dihasilkan dari tabel.

Fungsi JavaScript berikut mengimplementasikan langkah-langkah di atas untuk mengekspor data tabel di sisi klien.

function exportCSVExcel() {
	var tableElement = document.getElementById("table-product-list");
	var sourceData = "data:text/csv;charset=utf-8,";
	var i = 0;
	while (row = tableElement.rows[i]) {
		sourceData += ([
			row.cells[0].innerText,
			row.cells[1].innerText,
			row.cells[2].innerText,
			row.cells[3].innerText
		]).join(",") + "\r\n";
		i++;
	}
	window.location.href = encodeURI(sourceData);
}

Opsi 3 – Ekspor tabel HTML ke Excel menggunakan plugin berbasis jQuery

Plugin jQuery table2excel adalah solusi populer untuk mengekspor HTML ke Excel.

Ini memiliki banyak fitur dengan kemampuan ekspor utama. mereka,

  1. menyertakan/menyertakan tag HTML seperti entri, tautan, atau gambar yang ada di HTML tabel sumber.
  2. Menghapus beberapa elemen tabel dengan mengacu pada pemilih kelas atau id elemen tertentu.
  3. Menyediakan fitur untuk mengatur nama file yang dengannya data yang diekspor akan dimuat ke dalam browser.

Impor file plugin jQuery dan table2excel <سر> bagian sebagai berikut

Ada cara alternatif untuk menginstal plugin table2excel. Halaman Github-nya menyediakan dokumentasi tentang cara menginstal dan menggunakannya.

<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script
    src="https://cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>

Kemudian, inisialisasi kelas plugin dengan referensi ke elemen tabel HTML sumber.

JavaScript berikut melakukan inisialisasi. Selama instantiasi, ini mengatur larik opsi untuk menentukan nama file, ekstensi, dan flag yang berlaku.

function exportCSVExcel() {
	$('#table-product-list').table2excel({
		exclude: ".no-export",
		filename: "download.xls",
		fileext: ".xls",
		exclude_links: true,
		exclude_inputs: true
	});
}

Contoh ini menggunakan sumber yang sama dengan tabel HTML untuk operasi ekspor. Perbedaannya adalah bahwa isi tabel sumber menandai beberapa baris Tidak ada ekspor Kelas

Kelas ini dikonfigurasi dalam skrip di atas dengan menghapus Fitur dari kelas plugin ini

Hasil:

Jadi, kita telah melihat tiga implementasi sederhana untuk menambahkan tabel HTML ke fitur Excel. Meskipun fitur ekspor sangat penting, kita harus memiliki komponen yang memberikan hasil yang mulus.

Saya berharap solusi di atas dapat menjadi platform yang cocok untuk membuat komponen tersebut. Untuk memiliki alat pembuatan laporan yang efisien di Excel, itu pasti akan menghubungkan lebih banyak fitur.

Lihat demo unduhan

Kembali ke atas


Source link

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.