Export HTML ke Excel dengan PHP dan jQuery

ullprasetio Maret 16, 2020
How to export html to excel using library phpspreadsheet and jquery

Hai, berjumpa lagi dalam blog sederhana ini, kali ini kita akan mempelajari bagaimana mengeksport HTML ke Excel dengan menggunakan PHP dan jQuery.

Disini kita membutuhkan library dari PHPOffice/PhpSpreadsheet, kalian bisa download disini..

Setelah file berhasil didownload, silahkan ekstrak file tersebut didalam folder htdocs kalian.

Instal Composer, bisa kalian download disini lalu install, jika proses instalasi selesai kalian bisa mengeceknya lewat cmd, berikut langkahnya:

  1. Buka Command Prompt as Administator
  2. Ketikan "cd /." (tanpa tanda petik)
  3. Lalu ketikan "cd xampp/htdocs/phpspreadsheet-master" (tanpa tanda petik), karena saya menyimpan projectnya difolder tersebut.
  4. Kemudian ketikan "composer update" (tanpa tanda petik)

Untuk lebih jelasnya simak video singkat berikut:



Jika proses update composer sudah selesai kita kembali lagi ke text editor dan tinggal membuat 1 folder dengan nama tmp_html dan 2 file tambahan yaitu index.php dan export.php
  • index.php - berisi baris kode untuk menampilkan data dalam tabel
  • export.php - berisi baris kode untuk proses export data ke excel



index.php

<!DOCTYPE html>
<html>
<head>
 <title>Export ke Excel</title>
</head>
<body>
 <form method="POST" action="export.php" id="convert_form">
  <table border="1" id="table_content">
   <tr>
    <th>NIS</th>
    <th>Nama</th>
    <th>Jurusan</th>
   </tr>
   <tr>
    <td>123</td>
    <td>Yobi</td>
    <td>RPL</td>
   </tr>
   <tr>
    <td>123</td>
    <td>Yogi</td>
    <td>TKR</td>
   </tr>
   <tr>
    <td>123</td>
    <td>Yugi</td>
    <td>MM</td>
   </tr>
  </table>
  <input type="hidden" name="file_content" id="file_content">
  <button type="submit" name="convert" id="convert">Convert</button>
 </form>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</body>
</html>

<script type="text/javascript">
 $(document).ready(function() {
  $('#convert').click(function() {
   var table_content = '<table>';
   table_content += $('#table_content').html();
   table_content += '</table>';
   $('#file_content').val(table_content);
   $('#convert_form').html();
  });
 });
</script>

Pada script javascript dibawah digunakan untuk mengisi input file_content dengan data yang ada pada tabel yang kemudian dikirimkan ke export.php
<script type="text/javascript">
 $(document).ready(function() {
  $('#convert').click(function() {
   var table_content = '<table>';
   table_content += $('#table_content').html();
   table_content += '</table>';
   $('#file_content').val(table_content);
   $('#convert_form').html();
  });
 });
</script>

export.php

<?php

include 'vendor/autoload.php';
use PhpOffice\PhpSpreadsheet\IOFactory;

if(isset($_POST['file_content'])) 
{
        // tampung temporary file html ke folder tmp_html
 $temp_html_file = './tmp_html/'.time().'.html';
 file_put_contents($temp_html_file, $_POST['file_content']);

 $reader = IOFactory::createReader('Html');

 $spreadsheet = $reader->load($temp_html_file);

 $writer = IOFactory::createWriter($spreadsheet, 'Xlsx');

 $filename = time().'.xlsx';

 $writer->save($filename);
 header('Content-Type: application/x-www-form-urlencoded');
 header('Content-Transfer-Encoding: Binary');
 header("Content-disposition: attachment; filename=\"".$filename."\"");
 
 readfile($filename);
 
 unlink($temp_html_file);
 unlink($filename);
 
 exit;
}

Jika penjelasan diatas belum jelas atau masih ada galat atau error silahkan tonton video tutorialnya disini.

Terimakasih dan semoga berhasil.



Tags:

Posting Komentar

0 Komentar