Експорт HTML таблиці у Excel

ПублікаціїКонвертувати

Інколи виникає необхідність не тільки відобразити дані у браузері алей дозволити користувачеві завантажити їх у вигляді таблиці тобто файлу табличного процесу Microsoft Excel. Розглянемо можливості експорту HTML таблиці у файл Excel.

У JavaScript немає технології для створення повноцінного файлу Excel (ActiveX у Internet Explorer не враховується). Так як файл Excel являє собою складний бінарний файл, найпростіший спосіб створення файлу буде файл з HTML (XML) документом. А вже табличний редактор Excel перетворить цей документ у свій формат. Тому для створення таблиці Excel необхідно використовувати Data URL.

Data URL можна присвоїти властивості location.href, передати новому вікну за допомогою window.open() або присвоїти посиланню елементу A.href

Data URL містить рядок з форматом: "data:application/vnd.ms-excel,дані таблиці". Причому дані таблиці рекомендовано кодувати за допомогою encodeURIComponent().

Тестові таблиці:

Назва
1JavaScript
2JS
3Джаваскрипт
4Яваскрипт
<table id="test_table"> <tr><th>№</th><th style="width:95px;color:blue;">Назва</th></tr> <tr><td>1</td><td style="color:#3d3d3d;">JavaScript</td></tr> <tr><td>2</td><td>JS</td></tr> <tr><td>3</td><td>Джаваскрипт</td></tr> <tr><td>4</td><td>Яваскрипт</td></tr> </table>
Приклад
JavaScriptЯваскрипт
Джаваскрипт
<table id="test_table2" border="1"> <tr><th colspan="2">Приклад</th></tr> <tr><td rowspan="2">JavaScript</td><td>Яваскрипт</td></tr> <tr><td>Джаваскрипт</td></tr> </table>

Один з "примітивних" спосібів є записувати поступова дані в "клітинку", а роздільником між клітинками використовувати символ табуляції "\t".

function tableToExcel(id){ var data='', table=document.querySelector(id); var tr=table.getElementsByTagName('tr'); for(var i=0, len_i=tr.length;i<len_i;i++){ for(var j=0, len_j=tr[i].children.length;j<len_j;j++){ data+=(tr[i].children[j].innerText?tr[i].children[j].innerText:tr[i].children[j].innerHTML)+'\t'; } data+='\n'; } location.href='data:application/vnd.ms-excel,'+encodeURIComponent(data); } tableToExcel('#test_table');

Створення файлу з HTML самої таблиці, прицьму можна вказувати CSS стилі. Табличний процесор форматує HTML таблицю у власний формат. Але можуть виникати проблеми з кодуванням символів. Навіть при вказаному параметрі "data:application/vnd.ms-excel;charset=utf-8,дані" табличні процесори відображають символи не коректно.

function TableToExcel(id){ var htmltable = document.getElementById(id); window.open('data:application/vnd.ms-excel;charset=utf-8,'+encodeURIComponent('<table border="1">'+htmltable.innerHTML+'</table>')); } TableToExcel('test_table');

Також використовують Data URL наступного формату: "data:application/csv;charset=utf-8,дані" :

function tableToExcel(id){ var table=document.getElementById(id); location.href='data:application/csv;charset=utf-8,'+table.innerHTML; } tableToExcel('test_table');

Також дані таблиці можна закодувати 64 бітним кодуванням за допомогою функції btoa(), прицьому слід вказати що дані закодовані: "data:application/vnd.ms-excel;base64,дані"

function TableToExcel(id){ var htmltable = document.getElementById(id); window.open('data:application/vnd.ms-excel;base64;charset=utf-8,'+btoa(unescape(encodeURIComponent('<table border="1">'+htmltable.innerHTML+'</table>')))); } TableToExcel('test_table');

Створення Excel файлу на основі HTML документу з використанням XML параметрів для Excel.

function HTMLtoExcel(table, name){ table=document.querySelector(table); if(name==undefined)name='Аркуш1'; var xls='<html xmlns:x="urn:schemas-microsoft-com:office:excel">'; xls+='<head><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'; xls+='<x:Name>'+name+'</x:Name>'; //назва аркуша xls+='<x:WorksheetOptions><x:Panes><x:Pane></x:Pane></x:Panes></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml>'; xls+='<meta charset="utf-8"></head><body>'; //задаємо utf-8 кодування xls+='<table border="1px">'+table.innerHTML+'</table>'; //дадаємо внутрішній код таблиці xls+='</body></html>'; location.href='data:application/vnd.ms-excel;charset=utf-8,'+encodeURIComponent(xls); } HTMLtoExcel('#test_table');

XML в Excel файл є більш складною і громісткою процедурою, але дозволяє більш детально вказати параметри документу, таблиці, клітинки. Також дозволяє експортувати у файл Excel декілька таблиць.

function tableToExcel(id,options){ if(options==undefined)options={}; var xml, table=document.querySelectorAll(id); xml='<?xml version="1.0" encoding="UTF-8"?>\n'; xml+='<?mso-application progid="Excel.Sheet"?>\n'; xml+='<Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet" xmlns:html="http://www.w3.org/TR/REC-html40">\n'; xml+='<DocumentProperties xmlns="urn:schemas-microsoft-com:office:office">'; if(options.title)xml+='<Title>'+options.title+'</Title>'; if(options.avtor)xml+='<Author>'+options.avtor+'</Author>'; if(options.description)xml+='<Description>'+options.description+'</Description>'; xml+='<Created>'+JSON.stringify(new Date())+'</Created><Company>яваскрипт.укр</Company><Version>12</Version></DocumentProperties>\n'; xml+='<Styles><Style ss:ID="Default" ss:Name="Normal"><Alignment ss:Vertical="Bottom"/><Borders/><Font/><Interior/><NumberFormat/><Protection/></Style></Styles>\n'; for(var x=0, len=table.length;x<len;x++){ xml+='<Worksheet ss:Name="Аркуш'+(x+1)+'"><Table>\n'; var tr=table[x].getElementsByTagName('tr'); for(var i=0, len_i=tr.length;i<len_i;i++){ xml+='<Row>'; for(var j=0, type, text, len_j=tr[i].children.length;j<len_j;j++){ type='String'; text=(tr[i].children[j].innerText?tr[i].children[j].innerText:tr[i].children[j].innerHTML); if(text.replace(/^s+|s+$/g,'')!=''){ if(isFinite(text)===true) type='Number'; } xml+='<Cell><Data ss:Type="'+type+'">'+text+'</Data></Cell>\n'; } xml+='</Row>\n'; } xml+='</Table></Worksheet>\n'; } xml+='</Workbook>'; location.href='data:application/vnd.ms-excel,'+encodeURIComponent(xml); } tableToExcel('#test_table, #test_table2',{title:'Приклад',avtor:'JavaScript',description:'Експорт таблиці в Excel'});

Не завжди табличний процесор коректно форматує у свій формат. І якщо десктопний Microsoft Excel відкриває файли, то Microsoft Excel v1.0.1 для Android ні.

WPS Office v9.2.227718 Android не відкриває коректно.

Адмін 2017-11-27 14:20:13

Тільки зареєстровані користувачі можуть писати коментарі.