Export Data Dari Table Dengan Menggunakan Javascript

kalau kemarin saya share cara export table di html dengan menggunakan PHP, kali ini saya akan share tutorial cara export table di html dengan menggunakan javascript, dalam tutorial ini saya hanya menggunakan sintak dasar dari javascript dan tidak menggunakan plugin, dan hasil output format excelnya adalah format excel 2003
seperti dalam tutorial sebelum - sebelumnya buatlah projek dengan nama terserah anda setelah itu buat database dengan nama terserah anda juga kemudian salin kode sql berikut dan jalankan di sql

DROP TABLE IF EXISTS `users`;
CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama` varchar(50) DEFAULT NULL,
  `alamat` text,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=20 DEFAULT CHARSET=latin1;

-- ----------------------------
-- Records of users
-- ----------------------------
INSERT INTO `users` VALUES ('1', 'Rohmat', 'Jlan. Pantura ciasem tengah');
INSERT INTO `users` VALUES ('2', 'Mimin', 'Jlan. Krajan timur');
INSERT INTO `users` VALUES ('3', 'Maman', 'Jlan. Krajan  barat');
INSERT INTO `users` VALUES ('4', 'Roni', 'Jlan. Mekar sari indah ');
INSERT INTO `users` VALUES ('5', 'Rachmat Hidayat', 'Jlan. Garuda 1');
INSERT INTO `users` VALUES ('6', 'Terzo', 'Jlan. Garuda 2');
INSERT INTO `users` VALUES ('7', 'carlos', 'Jlan. Garuda 3');
INSERT INTO `users` VALUES ('8', 'Dwi Susanti Mustari', 'Jlan. Garuda 4');
INSERT INTO `users` VALUES ('9', 'Desmond Satria Andrian', 'Jlan. Garuda 5');
INSERT INTO `users` VALUES ('10', 'Ka Ar', 'Jlan. Garuda 6');
INSERT INTO `users` VALUES ('11', 'Ka Keke', 'Jlan. Garuda 7');
INSERT INTO `users` VALUES ('12', 'Ka Deri', 'Jlan. Garuda 8');
INSERT INTO `users` VALUES ('13', 'Ka Rendy', 'Jlan. Garuda 9');
INSERT INTO `users` VALUES ('14', 'Ka Yanti', 'Jlan. Garuda 10');
INSERT INTO `users` VALUES ('15', 'Ka Nury', 'Jlan. Garuda 11');
INSERT INTO `users` VALUES ('16', 'Salma', 'Jlan. Garuda 12');
INSERT INTO `users` VALUES ('17', 'Terryn', 'Jlan. Garuda 13');
INSERT INTO `users` VALUES ('18', 'Hafiz', 'Jlan. Garuda 14');
INSERT INTO `users` VALUES ('19', 'Felicia', 'Jlan. Garuda 15');

setelah table dan datanya sudah masuk ke database yang anda buat, kemudian buat koneksi ke database dangan menggunakan php, silahkan salin kode berikut dan simpan file didalam projek yang sudah anda buat tadi dengan dengan nama koneksi.php

<?php
  $host = 'localhost';
  $user = 'root';
  $pass = '';
  $db = 'jsexcel';

  $conn = mysql_connect($host, $user, $pass);
  mysql_select_db($db, $conn);

ganti user, pass, dan db sesuai dengan user, password dan db anda.
dan yang terakhir, salin kode dibawah ini dan simpan file didalam projek yang sudah anda buat dengan nama index.php

<!DOCTYPE html>
<html>
<head>
<title>EXPORT TABLE KE EXCEL DENGAN JAVASCRIPT</title>
<script type="text/javascript">
  window.onload = function () {
    var table = document.getElementById('data-table'),
    download = document.getElementById('download');

    download.addEventListener('click', function () {
      window.open('data:application/vnd.ms-excel,' + encodeURIComponent(table.outerHTML));
    });
  }
</script>
</head>
<body>
<a href="#" id="download">download file excel</a>
<table border="1" id="data-table">
  <thead>
    <tr>
      <th>NAMA</th>
      <th>ALAMAT</th>
    </tr>
  </thead>
  <tbody>
    <?php
      // memanggil koneksi
      require_once __DIR__.'/koneksi.php';

      // menampilkan data users
      $sql = 'SELECT * FROM users';
      $rs = mysql_query($sql) or die ($sql);

      while ($row = mysql_fetch_array($rs)) {
        $nama = $row['nama'];
        $alamat = $row['alamat'];
    ?>
    <tr>
      <td><?php echo $nama; ?></td>
      <td><?php echo $alamat; ?></td>
    </tr>
    <?php } ?>
  </tbody>
</table>
</body>
</html>

sekarang coba jalankan projek yang sudah anda buat, dan anda akan mendapatkan tampilan seperti ini

Export Data Dari Table Dengan Menggunakan Javascript (Web)

ketika download file excel di klik maka anda akan mendapatkan file excel seperti ini

Export Data Dari Table Dengan Menggunakan Javascript (Excel)

Ok. sampai di sini dulu tutorial kali ini, selamat mencoba dan semoga bisa bermanfaat.

Berbagi Via

Jangan lupa tinggalkan komentarnya ya :)

2 comments:

HannahNovember 4, 2020 at 1:13 AM
ArenaDomino Partner Terbaik Untuk Permainan Kartu Anda!
Halo Bos! Selamat Datang di ( arenakartu.org )
Arenadomino Situs Judi online terpercaya | Dominoqq | Poker online
Daftar Arenadomino, Link Alternatif Arenadomino Agen Poker dan Domino Judi Online Terpercaya Di Asia
Daftar Dan Mainkan Sekarang Juga 1 ID Untuk Semua Game
ArenaDomino Merupakan Salah Satu Situs Terbesar Yang Menyediakan 9 Permainan Judi Online Seperti Domino Online Poker Indonesia,AduQQ & Masih Banyak Lain nya,Disini Anda Akan Nyaman Bermain :)

Game Terbaru : Perang Baccarat !!!

Promo :
- Bonus Rollingan 0,5%, Setiap Senin
- Bonus Referral 20% (10%+10%), Seumur Hidup

Wa :+855964967353
Line : arena_01
WeChat : arenadomino
Yahoo! : arenadomino

Situs Login : arenakartu.org

Kini Hadir Deposit via Pulsa Telkomsel / XL ( Online 24 Jam )
Min. DEPO & WD Rp 20.000,-

INFO PENTING !!!
Untuk Kenyamanan Deposit, SANGAT DISARANKAN Untuk Melihat Kembali Rekening Kami Yang Aktif Sebelum Melakukan DEPOSIT di Menu SETOR DANA.
ReplyDelete
Replies
DewaMay 12, 2022 at 4:00 AM
Makasih infonya
www.hargasewamobildibali.com
ReplyDelete
Replies

Add comment