Конвертирование данных из HTML таблицы в CSV на JavaScript
Данный скрипт позволяет конвертировать данные из HTML таблицы в CSV в браузере.
HTML страница:
Код:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HTML 2 csv</title> <script type="text/javascript" src="jquery-1.7.1.js" ></script> <script type="text/javascript" src="html2csv.js" ></script> </head> <body> <table id="table2csv" border="1" style="background-color:#FFFFCC" width="0%" cellpadding="3" cellspacing="3"> <tr> <th>Товар</th> <th>Артикул</th> <th>Цена</th> <th>Производитель</th> <th>В наличии</th> </tr> <tr> <td>Камера наружняя</td> <td>23421-15</td> <td>2500 руб</td> <td>Producer 1</td> <td>Да</td> </tr> <tr> <td>Камера наружняя</td> <td>23421-15</td> <td>2500 руб</td> <td>Producer 1</td> <td>Да</td> </tr> <tr> <td>Камера наружняя</td> <td>23421-15</td> <td>2500 руб</td> <td>Producer 1</td> <td>Да</td> </tr> <tr> <td>Камера наружняя</td> <td>23421-15</td> <td>2500 руб</td> <td>Producer 1</td> <td>Да</td> </tr> <tr> <td>Камера наружняя</td> <td>23421-15</td> <td>2500 руб</td> <td>Producer 1</td> <td>Да</td> </tr> <tr> <td>Камера наружняя</td> <td>23421-15</td> <td>2500 руб</td> <td>Producer 1</td> <td>Да</td> </tr> <tr> <td>Камера наружняя</td> <td>23421-15</td> <td>2500 руб</td> <td>Producer 1</td> <td>Да</td> </tr> </table> <input value="Экспорт в CSV" type="button" onclick="$('#table2csv').table2CSV({header:['Товар','Артикул','Цена','Производитель','В наличии']})"> </body> </html>
JavaScript код:
Код:
jQuery.fn.table2CSV = function(options) { var options = jQuery.extend({ separator: ';', header: [], delivery: 'popup' // popup, value }, options); var csvData = []; var headerArr = []; var el = this; // количество элементво заголовка таблицы var numCols = options.header.length; var tmpRow = []; // массив заголовков таблицы if (numCols > 0) { for (var i = 0; i < numCols; i++) { tmpRow[tmpRow.length] = formatData(options.header[i]); } } else { $(el).filter(':visible').find('th').each(function() { if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html()); }); } // печатаем заголовок в csv row2CSV(tmpRow); // проходимся по ячейкам таблицы $(el).find('tr').each(function() { var tmpRow = []; $(this).filter(':visible').find('td').each(function() { if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html()); }); // ячейки таблицы в csv row2CSV(tmpRow); }); if (options.delivery == 'popup') { var mydata = csvData.join('\n'); return popup(mydata); } else { var mydata = csvData.join('\n'); return mydata; } function row2CSV(tmpRow) { var tmp = tmpRow.join('') // удаляем пустые строки if (tmpRow.length > 0 && tmp != '') { var mystr = tmpRow.join(options.separator); csvData[csvData.length] = mystr; } } function formatData(input) { // заменяем " на “ var regexp = new RegExp(/["]/g); var output = input.replace(regexp, "“"); //HTML var regexp = new RegExp(/\<[^\<]+\>/g); var output = output.replace(regexp, ""); if (output == "") return ''; return '"' + output + '"'; } function downloadFile(data="", fileName="test.txt", type="text/plain;charset=UTF-8") { // создаем невидимый элемент ссылки const a = document.createElement("a"); a.style.display = "none"; document.body.appendChild(a); // в качестве данных для загрузки из ссылки устанавливаем данные из формы a.href = window.URL.createObjectURL( new Blob([data], { type }) ); // аттрибут download ссылки используется для загрузки файла a.setAttribute("download", fileName); // запускаем загрузку путем эмулирования нажатия клавиши a.click(); // удаляем ссылку из DOM document.body.removeChild(a); } function popup(data) { alert(data) downloadFile(data,'data.csv','text/csv'); return true; } };
При нажатии на ссылку браузер загружает файл в виде CSV не обращаясь к серверу.
Android 8.1.0, Chrome,70.0.3538.110