Afficher les donnees d'un fichier txt (500 Mb et +) dans une textarea html

**Akiraj** · 18/11/2020, 02h53

Bonjour,

Depuis quelques temps maintenant j'essaye de developper un logiciel avec Electron permettant de filtrer des donnees provenant de fichiers textes.
J'ai donc creer une forme HTML dan laquelle j'ai insere un bouton "input" et une textarea pour display les fichiers.

Avant de pouvoir inserer la partie filtre a proprement parle, j'aimerais deja pouvoir display le contenu entier d'un fichier texte dans ma textarea.
Ces fichiers etant plutot imposant (en general entre 500 Mb a + de 1 Gb) j'ai donc choisi de partir sur une solution stream de node.js.

Apres beaucoup de recherche la seule solution qui me convenait etait d'utiliser un "createReadStream" combine a une solution de pipe et l'utilisation de event-stream provenant de npm.

Avec cette combinaison je n'ai donc aucun probleme pour lire les fichiers qu'il fasse meme 1 ou 2 Gb.

Le probleme vient au moment ou je veut display le contenu de ces fichiers dans ma textarea. J'arrive a inserer tout le contenu au fur et a mesure mais vient un moment ou je vais subir un lag et il devient alors impossible de scroll pour lire le contenu.

Y a t'il une solution pour pallier a ce probleme ?

Peut-etre que l'utilisation d'une textarea ou du moins la facon dont j'insere les donnees est mauvaise ?

je vous joint le code ci=dessous.

Merci d'avance.

Cordialement.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
      <input type='file' />
 
      <textarea name="data-textbox" class="display-file"></textarea>
</body>
</html>

Javascript + nodeJS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
const [input, textarea] = [
      document.querySelector("input[type=file]")
    , document.querySelector(".display-file")
  ];
 
const fs = require('fs')
, es = require('event-stream');
var data = []; 
 
streamFile = function(x, y) {
 
  var returnTxt = '';
  var readStream = fs
  .createReadStream(y,  {flags: 'r'})
  .pipe(es.split(/(\r?\n)/))
  .pipe(
    es
    .map(function(line, cb){
      cb(null, line);
 
        returnTxt += line;
        x.value = returnTxt;
 
  })
 
  .on('error', function(err){
      console.log('Error while reading file.', err);
  })
 
  .on('end', function(){
      console.log('Read entire file.');
 
    })
 
    );
 
}
 
input.onchange = () => {
 streamFile(textarea, input.files.path);
    }

**Dave Hiock** · 18/11/2020, 09h33

\ô/
il n'y a apparemment pas de limitation dans la taille du texte d'une TEXTAREA, cependant le moteur de rendu des navigateurs décide de l’opportunité de la mise à jour de l'affichage et là la taille des données fait que cela prendra forcément un certains temps

.

Dans ta fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
        returnTxt += line;
        x.value = returnTxt;

il n'est peut être pas utile de réaffecter la totalité de la valeur, un simple x.value += line; pourait peut-être améliorer la situation mais je doute.

Sur ce genre de soucis je partirais plutôt sur un type de pagination.

Afficher les donnees d'un fichier txt (500 Mb et +) dans une textarea html

NodeJS

Discussions similaires

Partager

Partager