.: 2014

(English)

When export HTML table to excel there will be some problems:

- Display CSS styles in excel
- Special characters problem (this example for Turkish characters)

For displaying CSS styles in excel, styles must be inline in HTML codes.

Example:

<table>
<tr>
<td style="background-color:red;">row 1 - column 1</td>
<td>row 1 - column 2</td>
</tr>
<tr>
<td>row 2 - column 1</td>
<td>row 2 - column 2</td>
</tr>
</table>

The best way to solve charset problem (special characters) is replacing characters one by one. This process is very easy and editable.

Example (For Turkish characters):

while (html.indexOf('ç') != -1) html = html.replace('ç', '&ccedil;');
while (html.indexOf('ğ') != -1) html = html.replace('ğ', '&#287;');
while (html.indexOf('ı') != -1) html = html.replace('ı', '&#305;');
while (html.indexOf('ö') != -1) html = html.replace('ö', '&ouml;');
while (html.indexOf('ş') != -1) html = html.replace('ş', '&#351;');
while (html.indexOf('ü') != -1) html = html.replace('ü', '&uuml;');

while (html.indexOf('Ç') != -1) html = html.replace('Ç', '&Ccedil;');
while (html.indexOf('Ğ') != -1) html = html.replace('Ğ', '&#286;');
while (html.indexOf('İ') != -1) html = html.replace('İ', '&#304;');
while (html.indexOf('Ö') != -1) html = html.replace('Ö', '&Ouml;');
while (html.indexOf('Ş') != -1) html = html.replace('Ş', '&#350;');
while (html.indexOf('Ü') != -1) html = html.replace('Ü', '&Uuml;');

To find out other languages' special characters follow this link: http://www.thesauruslex.com/typo/eng/enghtml.htm

All process is here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" charset='UTF-8'>
<script type="text/javascript">

function exportExcel() {
     var tableExport = document.getElementById('tableExport');
     var html = tableExport.outerHTML;

     while (html.indexOf('ç') != -1) html = html.replace('ç', '&ccedil;');
     while (html.indexOf('ğ') != -1) html = html.replace('ğ', '&#287;');
     while (html.indexOf('ı') != -1) html = html.replace('ı', '&#305;');
     while (html.indexOf('ö') != -1) html = html.replace('ö', '&ouml;');
     while (html.indexOf('ş') != -1) html = html.replace('ş', '&#351;');
     while (html.indexOf('ü') != -1) html = html.replace('ü', '&uuml;');

     while (html.indexOf('Ç') != -1) html = html.replace('Ç', '&Ccedil;');
     while (html.indexOf('Ğ') != -1) html = html.replace('Ğ', '&#286;');
     while (html.indexOf('İ') != -1) html = html.replace('İ', '&#304;');
     while (html.indexOf('Ö') != -1) html = html.replace('Ö', '&Ouml;');
     while (html.indexOf('Ş') != -1) html = html.replace('Ş', '&#350;');
     while (html.indexOf('Ü') != -1) html = html.replace('Ü', '&Uuml;');

     window.open('data:application/vnd.ms-excel,' + encodeURIComponent(html));
}

</script>
</head>
<body>
<button id="btnExport" onclick="exportExcel();">Export to Excel</button>
<table id="tableExport">
<tr>
<td style="background-color:red;">row 1 - column 1</td>
<td>row 1 - column 2 ÇçŞşÖöÜüİiĞğ </td>
</tr>
<tr>
<td>row 2 - column 1</td>
<td>row 2 - column 2</td>
</tr>
</table>
</body>
</html>

-----------------------------------------

(Türkçe)

HTML tablosunu Excel'e aktarırken karşılaşılan belli başlı birtakım sorunlar vardır:

- CSS stillerini aktarma
- Karakter sorunu (Örneğin: Türçe karakterler)

CSS stillerini Excel'e aktarmak için yazılan stillerin HTML kodları içine gömülü olması gerekir. Yani HEAD tag'leri arasına ya da ayrı bir dosyaya yazdığınız CSS stillerini görmemektedir.

Örneğin:

<table>
<tr>
<td style="background-color:red;">row 1 - column 1</td>
<td>row 1 - column 2</td>
</tr>
<tr>
<td>row 2 - column 1</td>
<td>row 2 - column 2</td>
</tr>
</table>

Karakter sorunu için de en iyi yol karakterleri tek tek değiştirmektir. Tek tek değiştirmek gözünüze zor gibi görünebilir fakat gayet kolay bir işlemdir.

Örneğin: (Türkçe karakterler için)

while (html.indexOf('ç') != -1) html = html.replace('ç', '&ccedil;');
while (html.indexOf('ğ') != -1) html = html.replace('ğ', '&#287;');
while (html.indexOf('ı') != -1) html = html.replace('ı', '&#305;');
while (html.indexOf('ö') != -1) html = html.replace('ö', '&ouml;');
while (html.indexOf('ş') != -1) html = html.replace('ş', '&#351;');
while (html.indexOf('ü') != -1) html = html.replace('ü', '&uuml;');

while (html.indexOf('Ç') != -1) html = html.replace('Ç', '&Ccedil;');
while (html.indexOf('Ğ') != -1) html = html.replace('Ğ', '&#286;');
while (html.indexOf('İ') != -1) html = html.replace('İ', '&#304;');
while (html.indexOf('Ö') != -1) html = html.replace('Ö', '&Ouml;');
while (html.indexOf('Ş') != -1) html = html.replace('Ş', '&#350;');
while (html.indexOf('Ü') != -1) html = html.replace('Ü', '&Uuml;');

diğer dillere ilişkin karakter kodlarının ne olduğunu öğrenmek için şu bağlantıya göz atabilirsiniz: http://www.thesauruslex.com/typo/eng/enghtml.htm

Son olarak bunların tamamını içeren kod aşağıdadır:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" charset='UTF-8'>
<script type="text/javascript">

function exportExcel() {
     var tableExport = document.getElementById('tableExport');
     var html = tableExport.outerHTML;

     while (html.indexOf('ç') != -1) html = html.replace('ç', '&ccedil;');
     while (html.indexOf('ğ') != -1) html = html.replace('ğ', '&#287;');
     while (html.indexOf('ı') != -1) html = html.replace('ı', '&#305;');
     while (html.indexOf('ö') != -1) html = html.replace('ö', '&ouml;');
     while (html.indexOf('ş') != -1) html = html.replace('ş', '&#351;');
     while (html.indexOf('ü') != -1) html = html.replace('ü', '&uuml;');

     while (html.indexOf('Ç') != -1) html = html.replace('Ç', '&Ccedil;');
     while (html.indexOf('Ğ') != -1) html = html.replace('Ğ', '&#286;');
     while (html.indexOf('İ') != -1) html = html.replace('İ', '&#304;');
     while (html.indexOf('Ö') != -1) html = html.replace('Ö', '&Ouml;');
     while (html.indexOf('Ş') != -1) html = html.replace('Ş', '&#350;');
     while (html.indexOf('Ü') != -1) html = html.replace('Ü', '&Uuml;');

     window.open('data:application/vnd.ms-excel,' + encodeURIComponent(html));
}

</script>
</head>
<body>
<button id="btnExport" onclick="exportExcel();">Excel'e Aktar</button>
<table id="tableExport">
<tr>
<td style="background-color:red;">satır 1 - kolon 1</td>
<td>satır 1 - kolon 2 ÇçŞşÖöÜüİiĞğ </td>
</tr>
<tr>
<td>satır 2 - kolon 1</td>
<td>satır 2 - kolon 2</td>
</tr>
</table>
</body>
</html>

.

14 Ağustos 2014 Perşembe

Javascript HTML Tabloyu Excel'e Aktarma (Javascript Export HTML Table to Excel)