59 lines
5.1 KiB
HTML
59 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="Exemple d’utilisation du script FreeDatas2HTML pour afficher les informations d’un fichier CSV dans une page web avec pagination et moteur de recherche.">
|
||
<meta name="robots" content="noindex">
|
||
<link rel="stylesheet" href="CSS/paper.min.css">
|
||
<link rel="stylesheet" href="CSS/fd2html.css">
|
||
<script src="JS/exampleWithUserFile.app.js" defer></script>
|
||
<script src="JS/matomo.js" defer></script>
|
||
<title>Afficher les données d’un fichier CSV dans une page web</title>
|
||
</head>
|
||
<body class="paper container">
|
||
|
||
<header id="header" class="text-center">
|
||
<h1><a href="/">FreeDatas2HTML</a></h1>
|
||
<nav id="menu-principal">
|
||
<ul class="inline row flex-center">
|
||
<li><a href="./#intro" class="badge warning sm-12 col">Introduction</a></li>
|
||
<li><a href="./examples.html#content" class="badge success sm-12 col">Exemples</a></li>
|
||
<li><a href="./documentation.html#content" class="badge success sm-12 col">Documentation</a></li>
|
||
<li><a href="https://forge.chapril.org/Fab_Blab/FreeDatas2HTML" target="_blank" title="accéder au dépôt GIT" rel="noopener" class="badge success sm-12 col">Git</a></li>
|
||
</ul>
|
||
</nav>
|
||
</header>
|
||
|
||
<h2>Affichez les données de votre fichier CSV</h2>
|
||
|
||
<p>Cette page vous permet de tester directement FreeDatas2HTML en affichant les données d’un fichier CSV de votre choix. Une fois votre fichier sélectionné, vous pourrez choisir les champs/colonnes à afficher. Suivant la taille de votre écran ou encore le nombre champs, le résultat peut être + ou − lisible… Sachez que FreeDatas2HTML permet d’afficher les données autrement que sous forme de tableau. Si vous visionnez cette page avec votre mobile, <a href="./examples.html#content">préférez les autres exemples</a> dont l'affichage s'adapte aux petits écrans.</p>
|
||
|
||
<form id="userSettings">
|
||
<fieldset class="form-group">
|
||
<label for="myFile">Sélectionnez votre fichier CSV :</label><input type="file" id="myFile" name="myFile" accept=".csv">
|
||
</fieldset>
|
||
<div id="displayOptions"></div>
|
||
</form>
|
||
<div class="row">
|
||
<div id="paginationOptions" class="sm-12 md-6 lg-3 col"></div>
|
||
<div id="search" class="sm-12 md-6 lg-9 col"></div>
|
||
</div>
|
||
<div id="datas"></div>
|
||
<p id="pages"></p>
|
||
|
||
<article id="content">
|
||
<h3>Fichier CSV ?</h3>
|
||
<p>Le format CSV reste couramment utilisé par des nombreux logiciels pour exporter/importer les données. Vous pouvez aussi en créer un en saisissant des données dans un tableur et choisissant le format CSV lors de l’enregistrement. <a href="https://help.libreoffice.org/latest/fr/text/scalc/guide/csv_files.html" title="Tutoriel site officiel LibreOffice" target="_blank" rel="noopener">Lire ici comment enregistrer en CSV avec LibreOffice</a>. À noter que votre fichier doit être <b>encodé en UTF8</b>, sous peine de rencontrer certains problèmes d’affichage, notamment si vos données contiennent des caractères accentués. Le problème peut se rencontrer en exportant des données à partir de logiciels assez anciens.</p>
|
||
<p>Pas de fichier CSV sous la main ? Alors vous pouvez <a href="/datas/grandes-villes-fr.csv">cliquer ici</a> pour télécharger la liste des villes françaises de + de 30 000 habitants, que j’ai moi-même <a href="https://fr.wikipedia.org/wiki/Liste_des_communes_de_France_les_plus_peupl%C3%A9es#Communes_de_plus_de_30_000_habitants" target="_blank" rel="noopener" title="Page Wikipédia">recopiée de Wikipédia</a>. Une fois le fichier enregistré sur votre ordinateur, sélectionnez-le via <a href="#userSettings">le formulaire ci-dessus</a>.</p>
|
||
<h3>À lire avant de partager cette page :-)</h3>
|
||
<p>FreeDatas2HTML <b>s’exécute uniquement côté client, c’est-à-dire dans votre navigateur</b>. Les données de votre fichier ne sont donc pas envoyées sur un serveur. En conséquence, si vous partager cette page avec d’autres personnes, elles devront elles-mêmes sélectionner le même fichier pour visualiser la même chose que vous. <b>Il est évidemment possible d’indiquer un fichier CSV à afficher par défaut dans une page !</b> C’est même ce qui est fait <a href="/withCSV.html">dans cet autre exemple</a>.</p>
|
||
</article>
|
||
|
||
<aside>
|
||
<p><a href="https://forge.chapril.org/Fab_Blab/freeDatas2HTML/src/branch/master/src/demo/exampleWithUserFile.ts" target="_blank" title="accéder au code" rel="noopener" class="paper-btn btn-secondary">Code source utilisé par cette page.</a></p>
|
||
</aside>
|
||
|
||
<footer><p>Design : <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a> | <a href="/mentions-legales.html">Contact et mentions légales</a>.</p></footer>
|
||
</body>
|
||
</html> |