Автор: Янн Мулонда
Перевод: сумасшедший технический ботаник
оригинал:blog.bit SRC.IO/CSV-excel-он…
Копирование без разрешения строго запрещено
Для чтения и обработки доступны два плагина JavaScript.CSVи файлы Excel, а затем просто напишите свой собственный сценарий.
CSV-представление: Разделяйте значения запятыми
Это формат файла для хранения табличных данных, таких как электронные таблицы или базы данных. могуCSVИмпорт файла формата или экспорт в программу, хранящуюся в таблице в таблице.
JSON
Скриншот моей структуры и файлов проекта
В этом руководстве мы рассмотрим и продемонстрируем, как данные могут бытьCSVФормат хранения иExcelсинтаксический анализ файлов в формате JSON и как использоватьjQuery-CSV а также SheetJS js-xlsxБиблиотека отображает данные в формате HTML.
Мы также рассмотрим, как совершать вызовы Ajax и получать запросы.
Чтение и обработка файлов CSV
продолжимindex.htmlдокумент"head tag"Добавьте зависимость библиотеки jQuery-CSV в:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.3/jquery.csv.min.js"></script>
Как вы можете видеть выше, папка моего проекта содержит следующие образцы CSV-файлов:
| FIRST NAME | LAST NAME | EMAIL ADDRESS | PHONE NUMBER | CITY | STATE | |
|---|---|---|---|---|---|---|
| Frank | Riley | frank@email.com | 123-456-7890 | New York | New York | |
| Steve | Brannigan | steve@example.fr | 123-456-1290 | San Francisco | California | |
| Marie | Ambrose | marie@yahoo.org | 123-976-7890 | Dallas | Texas | |
| Yann | Mulonda | yann@example.com | 321-854-5842 | Minneapolis | Minnesota | |
| Chris | Martins | chris@email.org | 123-654-8542 | Seattle | Washington |
UsersSample.csv
Примечание. В самом верху скрипта я объявляю переменные API, которые являются ссылками на файлы CSV и Excel в папке проекта:
var csv_file_API = './UsersSample.csv';
var excel_file_API = './soccer_players.xlsx';
Использование Аякса
«Ajax — это метод отправки и получения информации в фоновом режиме без обновления страницы. Он позволяет браузеру отправлять и получать информацию, а затем что-то делать с полученной информацией, например добавлять или изменять HTML-код на странице».
Всякий раз, когда мы отправляем или получаем информацию с помощью JavaScript, запускается событие, называемое вызовом Ajax. Мы можем использовать Ajax без jQuery, но мы должны написать XMLHttpRequest,Это немного сложно. Инициировать вызов Ajax с помощью методов Ajax jQuery — самый простой способ. источник:css-tricks.com
Теперь в моем файле script.js я передамАякс вызовчтобы прочитать файл CSV, преобразовать результат данных в JSON и отобразить его в списке на странице HTML. Вот код, который вызывает метод Jquery append и отображает данные:
// read csv file and convert to json format
$.ajax({
type: 'GET',
url: csv_file_API,
dataType: 'text',
error: function (e) {
alert('An error occurred while processing API calls');
console.log("API call Failed: ", e);
},
success: function (data) {
var jsonData = $.csv.toObjects(data);
console.log(jsonData);
$.each(jsonData, function (index, value) {
$('#showCSV').append(
'<li class="list-group-item d-flex justify-content-between align-items-center">' +
'<span style="margin-right: 2rem; font-size: 2rem; font-weight: bold; color: #37474F">' +
value['FIRST NAME'] +
'</span>' +
'<span style="margin-right: 2rem; font-size: 2rem; font-weight: bold; color: #37474F">' +
value['LAST NAME'] +
'</span>' +
'<span class="badge badge-primary badge-pill">' +
value.CITY +
'</span>' +
'<span class="badge warning-color-dark badge-pill">' +
value['PHONE NUMBER'] +
'</span>' +
'<span class="badge success-color-dark badge-pill">' +
value['EMAIL ADDRESS'] +
'</span>' +
'</li>'
);
});
} // end: Ajax success API call
}); // end: of Ajax call
Чтение и обработка файлов Excel
мы будем использоватьSheetJS js-xlsx(Упрощенная электронная таблица) читает и обрабатывает файл Excel. Этот подключаемый модуль может использовать JavaScript в веб-браузере и на сервере. Он поддерживает все форматы файлов Excel. По «тегу заголовка» их файл index.htmlcontent delivery network js(CDNjs) Добавьте зависимости библиотеки XLSX:
<script type="text/javascript" lang="javascript"src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.1/xlsx.full.min.js"></script>
Использовать выборку
В учебных целях давайте рассмотрим другой способ использования Ajax. Браузеры сильно улучшились за последние годы (думаю, за исключением Internet Explorer). Большинство браузеров теперь поддерживают Fetch API, современный способ работы с Ajax, который устраняет необходимость в таких библиотеках, как jQuery или Axios.
Fetch APIПредоставляет интерфейс JavaScript для доступа и обработки каждой части конвейера HTTP, например запросов и ответов. Он также предоставляет глобальныеfetch()метод, который обеспечивает простой и логичный способ асинхронного получения ресурсов по сети. Fetch также предоставляет логическое место для определения других концепций, связанных с HTTP, таких как расширения CORS и HTTP.
Таким образом, во второй части этого урока мы будем использоватьfetchчтобы прочитать файл excel и преобразовать результат данных в JSON. Этот код используется для запроса файла в script.js и отображения данных с помощью метода добавления jQuery:
// read Excel file and convert to json format using fetch
fetch('./soccer_players.xlsx').then(function (res) {
/* get the data as a Blob */
if (!res.ok) throw new Error("fetch failed");
return res.arrayBuffer();
})
.then(function (ab) {
/* parse the data when it is received */
var data = new Uint8Array(ab);
var workbook = XLSX.read(data, {
type: "array"
});
/* *****************************************************************
* DO SOMETHING WITH workbook: Converting Excel value to Json *
********************************************************************/
var first_sheet_name = workbook.SheetNames[0];
/* Get worksheet */
var worksheet = workbook.Sheets[first_sheet_name];
var _JsonData = XLSX.utils.sheet_to_json(worksheet, { raw: true });
/************************ End of conversion ************************/
console.log(_JsonData);
$.each(_JsonData, function (index, value) {
$('#showExcel').append(
'<tr>' +
'<th scope="row">' +
value['FIRST NAME'] +
'</th>' +
'<td>' +
value['LAST NAME'] +
'</td>' +
'<td>' +
'<span class="badge badge-primary badge-pill p-2">' +
value.AGE +
'</span>' +
'</td>' +
'<td>' +
value.CLUB +
'</td>' +
'<td>' +
value.CITY +
'</td>' +
'</tr>'
);
});
});
Интересно, я использовалMaterial Design BootstrapДля стилизации и отображения данных. Я также добавил дополнительные стили, чтобы сделать мои страницы более стильными, и вы можете оформить страницу по своему усмотрению. Вот моя HTML-страница:
Скриншот моей демонстрационной страницы
Если вы по-прежнему не можете отображать данные и просматривать файлы. Вас могут обнаружить в любой моментМой демо-репозиторий на GitHub.
Живое развертывание HTML-страниц через GitHub Pages
Предполагается, что вы сохранили файлы проекта в GitHub. Затем в репозитории проекта:
- Идти к "settings"
- Прокрутите вниз до "GitHub Pages" вариант
- Выберите Строить филиал под «Источник». В моем случае я выбрал "master branch".
После выбора для вас будет сгенерирована ссылка. Просто эта ссылка для просмотра вашей страницы и поделиться ею с другими.
на странице репозитория"окружающая обстановка"Вы также можете найти ту же ссылку.
Создание слизистой оболочки глотки.GitHub.IO/ читается в демо-версии…
Если вы просмотрите мой демонстрационный сайт, вы заметите, что страницу можно прокручивать, но полос прокрутки не видно. Вот стиль CSS для функции, которую я получил, добавив style.css:
html, body {
overflow: scroll;
overflow-x: hidden;
height: fit-content;
}
::-webkit-scrollbar {
width: 0px;
background: transparent;
/* make scrollbar transparent */
}