FreeDatas2HTML/public/userFile.html

59 lines
5.1 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<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.">
<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>
</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 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. 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 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>
<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>