Конвертирование данных из 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 не обращаясь к серверу.
-
Создано 19.09.2019 13:59:01
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.