FreeDatas2HTML/public/userFile.html

58 lines
4.8 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html>
2021-11-08 11:00:49 +01:00
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Exemple dutilisation du script FreeDatas2HTML pour afficher les informations dun fichier CSV dans une page web avec pagination et moteur de recherche.">
2021-11-08 11:00:49 +01:00
<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 dun fichier CSV dans une page web</title>
2021-11-08 11:00:49 +01:00
</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="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>
2021-11-08 11:00:49 +01:00
<p>Cette page vous permet de tester directement FreeDatas2HTML en affichant les données dun 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 dafficher les données autrement que sous forme de tableau.</p>
2021-11-08 11:00:49 +01:00
<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>
2021-11-08 11:00:49 +01:00
<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 lenregistrement. <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 daffichage, 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 30000 habitants, que jai 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>sexécute uniquement côté client, cest-à-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 dautres 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 dindiquer un fichier CSV à afficher par défaut dans une page!</b> Cest même ce qui est fait <a href="/withCSV.html">dans cet autre exemple</a>.</p>
</article>
2021-11-08 11:00:49 +01:00
<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>
2021-11-08 11:00:49 +01:00
</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>
2021-11-08 11:00:49 +01:00
</body>
</html>