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

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

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

дозволяє створювати лише невеликі файли Excel, так як браузери мають обмеження на довжину URL
підтримує Internet Explorer лише з 8 версії
закодовані дані за допомогою encodeURIComponent() (btoa) є більші за об'ємом ніж бінарний файл

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

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

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

№	Назва
1	JavaScript
2	JS
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	Яваскрипт
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

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